/* Бухгалтерия Горизонта — оформление.
   Палитра «Тишины» на белом фоне: слоновая кость ушла в карточки,
   акцент — hunter green, тревога — бронза, потери — бургунди.
   Мобильный вид настоящий: программа живёт на телефоне. */

:root{
  --paper:#FFFFFF; --paper-2:#F7F5EF; --paper-3:#EDEAE0;
  --card:#FAF8F2; --card-2:#FFFFFF;
  --ink:#0F1814; --ink-2:#1F2A24; --ink-3:#4A5550; --ink-4:#7A847E;
  --line:#E6E1D3; --line-strong:#D2CAB6;
  --green:#1F5A3A; --green-deep:#143F2A; --green-soft:#2D7A52;
  --green-bg:#DAE5DD; --green-border:#B5C9BA;
  --burgundy:#6B2419; --burgundy-bg:#ECDDD9; --burgundy-border:#D6BDB6;
  --bronze:#8B6F3F; --bronze-bg:#ECE3CC; --bronze-border:#D6C79E;
  --nav-h:60px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
}
.wrap{max-width:760px; margin:0 auto; padding:0 16px 40px}

h1{font-family:"Source Serif 4",Georgia,serif; font-weight:600;
   font-size:clamp(23px,5.4vw,30px); line-height:1.2; margin:14px 0 6px;
   letter-spacing:-.015em; text-wrap:balance}
h2{font-family:"Source Serif 4",Georgia,serif; font-weight:600;
   font-size:18px; margin:0; letter-spacing:-.01em}
p.lede{margin:0; color:var(--ink-3); font-size:14.5px; max-width:56ch}

/* ── шапка ── */
.top{padding:22px 0 18px; border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.brand-g{font-family:"Source Serif 4",Georgia,serif; font-weight:700;
         font-size:27px; line-height:1; color:var(--green-deep)}
.brand-name{font-family:"Source Serif 4",Georgia,serif; font-weight:600;
            font-size:20px; letter-spacing:-.01em}
.brand-sub{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
           color:var(--ink-4); margin-top:5px}

/* ── прогресс ── */
.progress{display:flex; align-items:center; gap:12px; margin-top:16px}
.bar{flex:1; height:6px; background:var(--paper-3); border-radius:3px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--green)}
.progress b{font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:600;
            color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ── ближайшее ── */
.next{margin:20px 0 6px; padding:17px 19px; border-radius:10px;
      background:var(--bronze-bg); border:1px solid var(--bronze-border)}
.next.calm{background:var(--green-bg); border-color:var(--green-border)}
.eyebrow{font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:600;
         letter-spacing:.09em; text-transform:uppercase; color:var(--bronze);
         margin-bottom:7px}
.next.calm .eyebrow{color:var(--green)}
.next .what{font-size:17px; font-weight:600; line-height:1.35; margin-bottom:4px}
.next .when{font-size:13.5px; color:var(--ink-3)}
.next .days{font-family:"JetBrains Mono",monospace; font-weight:600;
            color:var(--bronze); font-variant-numeric:tabular-nums}
.next.calm .days{color:var(--green)}

/* ── две плитки: доход и налог ── */
/* minmax(0,1fr) обязателен: моноширинная сумма шире колонки не даёт гриду
   сжаться, и вся страница уезжает горизонтально. */
.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
       gap:10px; margin-top:14px}
.tile{padding:14px; border-radius:9px; background:var(--card);
      border:1px solid var(--line); min-width:0}
.tile .k{font-size:12px; color:var(--ink-4); margin-bottom:5px}
.tile .v{font-family:"JetBrains Mono",monospace; font-weight:600;
         font-size:clamp(14px,4.2vw,18px); letter-spacing:-.02em;
         font-variant-numeric:tabular-nums; color:var(--ink);
         overflow-wrap:anywhere}
.tile.acc .v{color:var(--green)}

/* ── секции и пункты ── */
.sec{margin-top:30px}
.sec-head{display:flex; align-items:baseline; justify-content:space-between;
          gap:12px; padding-bottom:8px; border-bottom:1px solid var(--line-strong)}
.sec-head .due{font-family:"JetBrains Mono",monospace; font-size:11.5px;
               color:var(--ink-3); white-space:nowrap}

.item{border-bottom:1px solid var(--line)}
.row{display:flex; gap:13px; align-items:flex-start; padding:14px 2px}
.tick{flex:none; margin:1px 0 0; padding:0; border:0; background:none; cursor:pointer}
.tick span{display:block; width:21px; height:21px; border-radius:5px;
           border:1.5px solid var(--line-strong); background:var(--card-2);
           position:relative}
.tick.on span{background:var(--green); border-color:var(--green)}
.tick.on span::after{content:""; position:absolute; left:6.5px; top:2.5px;
  width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(42deg)}
.tick:focus-visible{outline:2px solid var(--green-soft); outline-offset:2px;
  border-radius:6px}
.body{flex:1; min-width:0}
.title{font-size:15.5px; font-weight:600; line-height:1.4}
.item.done .title{color:var(--ink-4); text-decoration:line-through}
.meta{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center;
      margin-top:5px; font-size:12.5px; color:var(--ink-3)}
.meta .dt{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums}

.tag{display:inline-block; padding:1.5px 7px; border-radius:4px; font-size:11px;
     font-weight:600; border:1px solid transparent}
.tag.hot{color:var(--bronze); background:var(--bronze-bg); border-color:var(--bronze-border)}
.tag.risk{color:var(--burgundy); background:var(--burgundy-bg); border-color:var(--burgundy-border)}
.tag.ok{color:var(--green); background:var(--green-bg); border-color:var(--green-border)}

/* ── формирование отчёта ── */
.build{display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:9px}
.build form{margin:0}
.build button.make{
  font:inherit; font-size:13.5px; font-weight:600; padding:8px 15px;
  border-radius:7px; border:1px solid var(--green); background:var(--green);
  color:#fff; cursor:pointer;
}
.build button.make:hover{background:var(--green-deep); border-color:var(--green-deep)}
.build button.again{
  font:inherit; font-size:12.5px; font-weight:600; padding:6px 11px;
  border-radius:6px; border:1px solid var(--line-strong);
  background:var(--card-2); color:var(--ink-3); cursor:pointer;
}
.build .file{
  display:inline-block; font-size:13.5px; font-weight:600; padding:8px 14px;
  border-radius:7px; text-decoration:none;
  color:var(--green); background:var(--green-bg); border:1px solid var(--green-border);
}
.build .need{
  font-size:12.5px; font-weight:600; color:var(--bronze); text-decoration:none;
  padding:7px 11px; border-radius:6px;
  background:var(--bronze-bg); border:1px dashed var(--bronze-border);
}
.build .hintline{font-size:12px; color:var(--ink-4)}
.build button:focus-visible,.build a:focus-visible{
  outline:2px solid var(--green-soft); outline-offset:2px}

details{margin-top:8px}
summary{cursor:pointer; font-size:12.5px; font-weight:600; color:var(--green);
        list-style:none; display:inline-flex; align-items:center; gap:5px}
summary::-webkit-details-marker{display:none}
summary::before{content:"›"; transition:transform .18s; font-size:15px; line-height:1}
details[open] summary::before{transform:rotate(90deg)}
.expl{margin-top:8px; padding:13px 15px; border-radius:8px; background:var(--card);
      border:1px solid var(--line); font-size:13.5px; line-height:1.6; color:var(--ink-2)}
.expl p{margin:0 0 9px} .expl p:last-child{margin-bottom:0}
.warn{color:var(--burgundy); font-weight:600}

/* ── формы ── */
.card{margin-top:18px; padding:18px; border-radius:10px; background:var(--card);
      border:1px solid var(--line)}
.field{display:block; margin-bottom:12px}
.field span{display:block; font-size:12.5px; color:var(--ink-3); margin-bottom:5px}
input,select,textarea{
  width:100%; font:inherit; font-size:16px; /* 16px — иначе iOS зумит форму */
  padding:10px 12px; border-radius:7px; border:1px solid var(--line-strong);
  background:var(--card-2); color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-soft);
  outline-offset:-1px; border-color:var(--green-soft)}
.pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
button.go{
  width:100%; font:inherit; font-size:15px; font-weight:600; padding:12px;
  border-radius:8px; border:1px solid var(--green); background:var(--green);
  color:#fff; cursor:pointer;
}
button.go:hover{background:var(--green-deep); border-color:var(--green-deep)}
.seg{display:flex; gap:0; border:1px solid var(--line-strong); border-radius:7px;
     overflow:hidden; margin-bottom:12px}
.seg label{flex:1; text-align:center; padding:10px 8px; font-size:14px;
           font-weight:600; cursor:pointer; color:var(--ink-3); background:var(--card-2)}
.seg input{display:none}
.seg input:checked + span{color:#fff}
.seg label:has(input:checked){background:var(--green); color:#fff}

/* ── лента операций ── */
.op{display:flex; gap:12px; align-items:flex-start; padding:13px 2px;
    border-bottom:1px solid var(--line)}
.op .sum{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:14.5px;
         font-variant-numeric:tabular-nums; white-space:nowrap; margin-left:auto}
.op .sum.in{color:var(--green)}
.op .who{font-weight:600; font-size:14.5px}
.op .pp{font-size:12.5px; color:var(--ink-3); margin-top:3px;
        overflow-wrap:anywhere}
.op form{margin-top:7px}
.op select{font-size:14px; padding:7px 9px}

.empty{padding:26px 18px; text-align:center; color:var(--ink-3); font-size:14px;
       border:1px dashed var(--line-strong); border-radius:9px; margin-top:16px}

/* ── нижняя навигация ── */
.nav{position:fixed; left:0; right:0; bottom:0; z-index:10;
     display:grid; grid-template-columns:repeat(4,1fr);
     background:var(--card-2); border-top:1px solid var(--line-strong);
     padding-bottom:env(safe-area-inset-bottom)}
.nav a{display:flex; flex-direction:column; align-items:center; justify-content:center;
       gap:3px; height:var(--nav-h); text-decoration:none; color:var(--ink-4);
       font-size:11px; font-weight:600}
.nav a.on{color:var(--green)}
.nav a i{font-style:normal; font-size:17px; line-height:1}
.nav .badge{position:absolute; transform:translate(14px,-13px);
            background:var(--bronze); color:#fff; border-radius:9px;
            font-size:10px; padding:1px 5px; font-family:"JetBrains Mono",monospace}

@media (min-width:720px){
  .nav{position:static; grid-template-columns:repeat(4,auto); justify-content:start;
       gap:4px; border-top:0; border-bottom:1px solid var(--line);
       background:transparent; max-width:760px; margin:0 auto; padding:0 16px}
  .nav a{height:46px; flex-direction:row; gap:7px; font-size:14px}
  body{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}