/* Ported from the allocation_ledger.html prototype. The block down to
   "additions" is the prototype's stylesheet unchanged apart from the page
   background, which now has to paint the whole viewport rather than sit
   inside an artifact frame. */

:root{
  --bg: #0e1613;
  --bg-panel: #131d19;
  --line: #24342e;
  --ink: #e7e6df;
  --ink-dim: #8fa39a;
  --ink-faint: #56655e;
  --sp: #d3a35c;
  --world: #4fa89a;
  --em: #7c93c9;
  --warn: #c96a4e;
  --good: #6fae7c;
  --mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
  --sans: 'IBM Plex Sans', -apple-system, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);}
.ledger{
  max-width:760px;
  margin:0 auto;
  padding:28px 24px 60px;
  background:var(--bg);
  border-radius:14px;
  /* Flex column so simple mode can reorder whole sections with `order` --
     no duplicated markup, and therefore no duplicated inputs to keep in sync. */
  display:flex;
  flex-direction:column;
}
.head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-bottom:1px solid var(--line);
  padding-bottom:16px;
  margin-bottom:22px;
}
.head h1{
  font-family:var(--mono);
  font-size:18px;
  font-weight:600;
  letter-spacing:0.02em;
  margin:0;
  color:var(--ink);
}
.head .tick{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-faint);
}
.section{
  margin-bottom:26px;
}
.section-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}
.section-label::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--line);
}
.row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}
.row:last-child{border-bottom:none;}
.swatch{
  width:9px;height:9px;border-radius:2px;flex-shrink:0;
}
.row-name{
  font-size:13.5px;
  flex:1;
  min-width:0;
  color:var(--ink);
}
.row-name .sub{
  display:block;
  font-size:11px;
  color:var(--ink-faint);
  font-family:var(--mono);
  margin-top:1px;
}
input[type=number]{
  width:120px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--mono);
  font-size:13.5px;
  padding:6px 8px;
  border-radius:6px;
  text-align:right;
}
input[type=number]:focus{
  outline:none;
  border-color:var(--ink-faint);
}
/* Written as input[type=number].pct-input, not .pct-input: the prototype's
   bare-class rule lost to input[type=number]{width:120px} on specificity
   (0,1,1 beats 0,1,0), so every percentage box silently rendered full-width. */
input[type=number].pct-input{width:64px;}
.currency-prefix{
  font-family:var(--mono);
  color:var(--ink-faint);
  font-size:12px;
}
.target-controls{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.target-group{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--ink-dim);
}
.bar{
  height:26px;
  display:flex;
  border-radius:6px;
  overflow:hidden;
  margin:14px 0 6px;
  border:1px solid var(--line);
}
.bar-seg{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:10.5px;
  color:#0e1613;
  font-weight:600;
  transition:width 0.4s ease;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
}
.bar-caption{
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--ink-faint);
  margin-bottom:20px;
}
.invest-box{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px;
}
.invest-input-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.invest-input-row input{
  flex:1;
  width:auto;
  font-size:16px;
  padding:10px 12px;
}
button{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.03em;
  border-radius:7px;
  padding:10px 16px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  cursor:pointer;
  transition:border-color 0.15s;
}
button:hover{border-color:var(--ink-faint);}
button.primary{
  background:var(--world);
  color:#0e1613;
  border-color:var(--world);
  font-weight:600;
}
button.primary:hover{opacity:0.9;}
.result-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.result-row:last-child{border-bottom:none;}
.result-name{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
}
.result-amount{
  font-family:var(--mono);
  font-size:15px;
  font-weight:600;
}
.result-detail{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-faint);
  margin-top:2px;
}
.footline{
  text-align:right;
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-faint);
  margin-top:16px;
}
.save-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:16px;
}
.status-msg{
  font-family:var(--mono);
  font-size:11px;
  color:var(--good);
  opacity:0;
  transition:opacity 0.3s;
}
.status-msg.show{opacity:1;}
.hint{
  font-size:11.5px;
  color:var(--ink-faint);
  margin-top:4px;
  line-height:1.5;
}
.weighted-fee{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-faint);
}

/* ------------------------------------------------------------ additions */

/* Error / warning banner (prototype had this inline on #errorBanner). */
.banner{
  border-radius:8px;
  font-family:var(--mono);
  font-size:12px;
  padding:10px 14px;
  margin-bottom:18px;
  line-height:1.5;
}
.banner.error{
  background:rgba(201,106,78,0.12);
  border:1px solid var(--warn);
  color:var(--warn);
}
.banner[hidden]{display:none;}
.banner-actions{
  margin-top:8px;
  display:flex;
  gap:8px;
}
.banner-actions button{
  padding:5px 10px;
  font-size:11px;
  background:transparent;
  color:inherit;
  border-color:currentColor;
}

/* Persistence state, shown next to the title so it is never ambiguous
   whether what is on screen has reached the database. */
.head-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.sync{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-faint);
  white-space:nowrap;
}
.sync[data-state="saving"]{color:var(--ink-dim);}
.sync[data-state="saved"]{color:var(--good);}
.sync[data-state="error"]{color:var(--warn);}
.linkish{
  background:none;
  border:none;
  padding:0;
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-faint);
  text-decoration:underline;
  cursor:pointer;
}
.linkish:hover{color:var(--ink-dim);border:none;}

/* Annual cost panel */
.cost-tiles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}
.cost-tile{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
}
.cost-tile .k{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:block;
  margin-bottom:6px;
}
.cost-tile .v{
  font-family:var(--mono);
  font-size:17px;
  font-weight:600;
  display:block;
}
.cost-tile .v2{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-faint);
  display:block;
  margin-top:3px;
}
.cost-tile.total{border-color:var(--ink-faint);}
.cost-tile.total .v{color:var(--sp);}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.cost{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
  min-width:520px;
}
table.cost th{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  text-align:right;
  font-weight:400;
  padding:0 0 8px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.cost th:first-child{text-align:left;}
table.cost td{
  padding:8px 0;
  border-bottom:1px solid var(--line);
  text-align:right;
  font-family:var(--mono);
  white-space:nowrap;
}
table.cost td:first-child{
  text-align:left;
  font-family:var(--sans);
  padding-right:12px;
  white-space:normal;
}
table.cost td+td{padding-left:12px;}
table.cost tbody tr:last-child td{border-bottom:none;}
table.cost tfoot td{
  border-top:1px solid var(--ink-faint);
  border-bottom:none;
  padding-top:9px;
  font-weight:600;
}
.fund-sub{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--ink-faint);
  margin-top:2px;
}
.untracked{color:var(--ink-faint);}
.flag{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border:1px solid var(--line);
  border-radius:4px;
  padding:1px 4px;
  color:var(--ink-faint);
  margin-left:6px;
  white-space:nowrap;
}
details.assumptions{margin-top:16px;}
details.assumptions>summary{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-dim);
  cursor:pointer;
  padding:6px 0;
}
details.assumptions>summary:hover{color:var(--ink);}
/* One grid PER ROW, not one grid for the whole table.
   A single shared grid auto-places every cell, so one extra or missing cell
   shifts every row after it -- the whole table silently drifts out of
   alignment. Per-row grids make a miscount impossible to propagate. */
.assume-grid{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
  font-size:12.5px;
}
.assume-row{
  display:grid;
  grid-template-columns:1fr 70px 70px 70px 70px 70px;
  gap:10px;
  align-items:center;
}
.assume-row .h{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  text-align:right;
}
.assume-row .h:first-child{text-align:left;}
.assume-grid input[type=number]{width:70px;font-size:12.5px;padding:5px 6px;}
.assume-grid .name{min-width:0;overflow-wrap:anywhere;}
/* Each field is exactly one grid cell -- no display:contents, so the cell
   count per row is fixed by the markup and cannot drift. */
.assume-field{display:flex;justify-content:flex-end;align-items:center;gap:6px;}
.assume-field .lbl{display:none;}
.assume-row.wide{grid-template-columns:1fr;}
.assume-row.wide .assume-field{justify-content:flex-start;}
.assume-row.wide .lbl{display:inline;}
.assume-note{margin-top:12px;}

/* --------------------------------------------------- simple mode layout
   Same DOM in both modes. Simple mode answers the question first (what to
   buy), then what you own, then what it costs, and pushes the data-entry and
   the fine print to the bottom. Detailed mode keeps the document order. */

body[data-mode="simple"] .head{order:1;}
body[data-mode="simple"] .mode-switch{order:2;}
body[data-mode="simple"] #errorBanner{order:3;}
body[data-mode="simple"] #intro{order:4;}
body[data-mode="simple"] #section-invest{order:5;}
body[data-mode="simple"] #section-stand{order:6;}
body[data-mode="simple"] #section-pie{order:7;}
body[data-mode="simple"] #section-cost{order:8;}
body[data-mode="simple"] #section-dividends{order:9;}
body[data-mode="simple"] #section-plan{order:10;}
body[data-mode="simple"] #holdingsDetail{order:11;}
body[data-mode="simple"] #section-backup{order:12;}
body[data-mode="simple"] .footline{order:13;}

/* The one-line explainer above the answer. */
.intro{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-dim);
  margin:0 0 22px;
}
body[data-mode="detailed"] .intro{display:none;}

/* Holdings entry: a plain group in detailed mode, a disclosure in simple. */
.holdings-detail{margin-bottom:0;}
.holdings-detail>summary{
  cursor:pointer;
  list-style:none;
  padding:14px 0;
  margin-bottom:8px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;
  align-items:center;
  gap:9px;
}
.holdings-detail>summary::-webkit-details-marker{display:none;}
.holdings-detail>summary::before{
  content:'+';
  font-size:14px;
  color:var(--ink-faint);
}
.holdings-detail[open]>summary::before{content:'–';}
.holdings-detail>summary:hover{color:var(--ink-dim);}
.holdings-detail>summary:focus-visible{outline:2px solid var(--world);outline-offset:3px;}
/* In detailed mode the group is always open and the summary is noise. */
body[data-mode="detailed"] .holdings-detail>summary{display:none;}

/* Cost headline: the shekel figure first, percent second. */
.cost-hero{margin-bottom:4px;}
body[data-mode="detailed"] .cost-hero{display:none;}
body[data-mode="simple"] .cost-tiles{display:none;}
.cost-hero-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.cost-hero-amount{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:36px;
  font-weight:600;
  letter-spacing:-0.03em;
  line-height:1.05;
}
.cost-hero-unit{font-size:14.5px;color:var(--ink-dim);}
.split-bar{
  display:flex;
  height:13px;
  border-radius:5px;
  overflow:hidden;
  margin:18px 0 12px;
  background:var(--bg-panel);
}
.split-bar div{height:100%;}
.split-legend{display:flex;flex-direction:column;gap:9px;}
.split-legend .row2{display:flex;align-items:baseline;gap:9px;font-size:14px;}
.split-legend .swatch{transform:translateY(1px);}
.split-legend .amt{
  margin-left:auto;
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  white-space:nowrap;
}

/* What you own: a subtitle per bucket and a grand total. */
.own-sub{
  display:block;
  font-size:12px;
  color:var(--ink-faint);
  margin-top:2px;
}
.own-total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-top:1px solid var(--ink-faint);
  margin-top:6px;
  padding-top:12px;
}
.own-total .k{font-size:14px;color:var(--ink-dim);}
.own-total .v{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:17px;
  font-weight:600;
}

/* Simple / Detailed switch */
.mode-switch{
  display:inline-flex;
  gap:2px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:9px;
  padding:3px;
  margin-bottom:22px;
}
.mode-btn{
  border:none;
  background:transparent;
  color:var(--ink-dim);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.04em;
  padding:8px 16px;
  border-radius:6px;
}
.mode-btn:hover{border:none;color:var(--ink);}
.mode-btn[aria-pressed="true"]{
  background:var(--line);
  color:var(--ink);
  font-weight:600;
}
.mode-btn:focus-visible{outline:2px solid var(--world);outline-offset:1px;}

/* Fund name over its real name + broker id */
.name-stack{display:flex;flex-direction:column;min-width:0;}
.name-sub{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--ink-faint);
  margin-top:2px;
  overflow-wrap:anywhere;
}

/* Plain-language lead paragraphs */
.plan-plain,.cost-plain{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink);
  margin:0 0 14px;
}
.cost-plain{color:var(--ink-dim);}
.cost-plain:empty,.plan-plain:empty{display:none;}
body[data-mode="detailed"] .plan-plain,
body[data-mode="detailed"] .cost-plain{display:none;}

/* Dividend flow */
.flow{display:flex;flex-direction:column;}
.flow-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:11px 0;
  border-top:1px solid var(--line);
}
.flow-row:first-child{border-top:none;}
.flow-row .k{font-size:14px;}
.flow-row .v{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
}
.flow-row.minus .v{color:var(--ink-dim);}
.flow-row.net .k{font-weight:600;}
.flow-row.net .v{color:var(--good);font-size:17.5px;}

/* In simple mode the answer should read as the answer. */
body[data-mode="simple"] .result-amount{font-size:20px;}
body[data-mode="simple"] #results .result-detail{font-size:12px;line-height:1.5;}

/* Backup & restore */
.backup-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.file-label{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.03em;
  border:1px solid var(--line);
  border-radius:7px;
  padding:10px 16px;
  cursor:pointer;
  color:var(--ink);
  transition:border-color 0.15s;
}
.file-label:hover{border-color:var(--ink-faint);}
.file-label input{display:none;}
.backup-msg{
  font-family:var(--mono);
  font-size:11px;
  color:var(--good);
  min-height:1.3em;
  margin-top:10px;
  line-height:1.5;
}
#backupText{
  width:100%;
  margin-top:6px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--ink);
  font-family:var(--mono);
  font-size:12px;
  padding:10px 12px;
  resize:vertical;
}
#backupText:focus{outline:none;border-color:var(--ink-faint);}

/* ------------------------------------------------------------ phones
   Checked at 390px (iPhone 14/15) and 428px (Plus/Pro Max). */
@media (max-width:560px){
  .ledger{padding:18px 14px 48px;}
  .head{flex-direction:column;align-items:flex-start;gap:8px;}
  .head-right{justify-content:flex-start;}

  /* 16px is the threshold below which iOS Safari zooms the page in when a
     field is focused, which then leaves the layout scrolled sideways. Larger
     padding also gets the fields to a comfortable thumb target (~40px). */
  input[type=number]{font-size:16px;padding:9px 10px;}
  input[type=number].pct-input{width:82px;}
  .assume-grid input[type=number]{font-size:16px;padding:8px 9px;width:86px;}
  .linkish{padding:6px 0;}

  .row{flex-wrap:wrap;}
  .row-name{flex:1 1 100%;order:1;}
  .swatch{order:0;}
  .row .currency-prefix{order:2;margin-left:auto;}
  .row input[type=number]{order:3;width:132px;}
  .cost-tiles{grid-template-columns:1fr;}
  .target-group{flex-wrap:wrap;}
  .invest-input-row{flex-wrap:wrap;}
  .invest-input-row input{flex:1 1 100%;order:1;}
  .invest-input-row .currency-prefix{order:0;}
  .invest-input-row button{order:2;flex:1 1 100%;}
  /* One field per line on a phone, each captioned by its own label. */
  .assume-row{grid-template-columns:1fr;gap:6px;}
  .assume-row.head{display:none;}
  .assume-grid .name{padding-top:10px;}
  .assume-field{justify-content:space-between;}
  .assume-field .lbl{
    display:inline;
    font-family:var(--mono);font-size:10px;color:var(--ink-faint);
    text-transform:uppercase;letter-spacing:0.04em;
  }
  .save-row{flex-direction:column;align-items:stretch;gap:10px;}
  .save-row button{width:100%;}
  .backup-row{flex-direction:column;align-items:stretch;}
  .backup-row button,.file-label{width:100%;text-align:center;}
  .mode-switch{display:flex;width:100%;}
  .mode-btn{flex:1;padding:10px 12px;}
  body[data-mode="simple"] .result-amount{font-size:19px;}
  .footline{text-align:left;}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}