:root{
  --ink:#111;
  --paper:#fff;
  --hair:#c9c9c9;
  --gap:26px;
  --cell:clamp(150px,19vw,240px);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100%;
  display:flex;flex-direction:column;
  overflow-x:hidden;
}
/* USE mode: whole site locked to one screen, no scroll */
body.locked{height:100%;overflow:hidden}

/* money report page */
.stage.report{overflow-y:auto}
.report-total{background:var(--ink);color:#fff;text-align:center;padding:26px 18px;margin-bottom:22px;flex:none}
.report-total .rt-label,.report-total .rt-sub{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(11px,1.4vw,15px);opacity:.85}
.report-total .rt-amount{font-weight:700;font-size:clamp(44px,8vw,92px);line-height:1.02;margin:6px 0}
.report-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;align-content:start}
.report-row{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  border-bottom:2px solid var(--ink);padding:11px 2px;
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(13px,1.5vw,18px)}
.report-row .rr-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.report-row .rr-tag{opacity:.5;font-size:.72em;margin-left:8px;letter-spacing:.05em}
.report-row .rr-amt{flex:none}
.report-row.annual{border-bottom-style:dashed}
@media (max-width:760px){ .report-list{grid-template-columns:1fr} }

/* box detail: notes + file attachments */
.stage.detailview{flex:1;min-height:0;overflow-y:auto;display:block;padding:26px 30px 60px}
.detail{max-width:760px;margin:0 auto}
.detail-title{font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:clamp(24px,4vw,40px)}
.detail-meta{font-weight:700;opacity:.7;margin-top:4px;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(13px,1.6vw,18px)}
.detail-label{font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:13px;margin:24px 0 8px;opacity:.7}
.detail-notes{width:100%;min-height:120px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);
  padding:14px;font-family:Helvetica,Arial,sans-serif;font-size:16px;resize:vertical}
.file-list{display:flex;flex-direction:column;gap:6px}
.file-empty{opacity:.4;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.file-row{display:flex;gap:8px}
.file-open{flex:1;min-width:0;text-align:left;background:var(--ink);color:#fff;border:none;padding:12px 14px;
  font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-del{flex:none;width:44px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:700;cursor:pointer}
.file-add{display:inline-block;margin-top:8px;border:3px dashed var(--hair);padding:11px 18px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:#666}
.file-add:active{background:#f2f2f2}
body.dark .file-add:active{background:#1f1f1f}
.lockscreen{max-width:560px;margin:30px auto 0;text-align:center}
.lock-btn{display:block;width:100%;margin-top:14px;padding:18px;border:3px solid var(--ink);
  background:var(--paper);color:var(--ink);font:inherit;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:16px;cursor:pointer}
.lock-btn.primary{background:var(--ink);color:var(--paper)}
.lock-btn:active{opacity:.8}
.box.has-notes::before{content:"";position:absolute;top:9px;left:9px;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.55}
.box.locked::before{content:"\1F512";position:absolute;top:7px;left:9px;font-size:13px;opacity:.85}

/* date list (birthdays / events / appointments) */
.datelist{display:flex;flex-direction:column}
.dl-month{font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:13px;opacity:.5;margin:18px 0 6px}
.dl-row{display:flex;justify-content:space-between;gap:14px;border-bottom:2px solid var(--ink);
  padding:11px 2px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(14px,1.7vw,19px)}
.dl-when{flex:none;opacity:.7;font-size:.85em}
.stage.locked{flex:1;min-height:0;display:flex;flex-direction:column;padding:28px 40px 34px}
.stage.locked .titlebox{flex:none;padding:16px 18px;margin-bottom:var(--gap)}
.stage.locked .titlebox .hdr{font-size:clamp(20px,3.4vw,40px)}
.screen{flex:1;min-height:0;display:grid;gap:var(--gap);width:100%}
.screen.centered{flex:1;min-height:0;place-content:center;justify-content:center;gap:var(--gap)}
.screen.centered .box{width:var(--cell);height:auto;aspect-ratio:1/.58}
.screen .box{min-width:0;min-height:0;aspect-ratio:auto;height:auto;width:auto;padding:12px 22px;box-shadow:0 0 0 1px #b9b9b9}
/* front page: smaller boxes, centered in their row so the lines are well separated */
.screen.front .box{align-self:center;height:clamp(52px,10.5vh,124px)}
.screen .box .hdr{font-size:clamp(13px,1.7vw,23px);word-break:normal;overflow-wrap:break-word;hyphens:none}
.screen .box.tap.opens::after{font-size:clamp(18px,2.4vw,34px)}

/* top bar */
.bar{
  position:sticky;top:0;z-index:5;flex:none;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:10px 14px;
  background:var(--paper);
  border-bottom:3px solid var(--ink);
}
.crumbs{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:6px;
  overflow-x:auto;white-space:nowrap;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:14px;
}
.crumbs button{
  background:none;border:none;cursor:pointer;
  font:inherit;text-transform:uppercase;font-weight:700;
  color:var(--ink);padding:2px 0;
}
.crumbs button:not(:last-child){opacity:.45}
.crumbs .sep{opacity:.3;font-weight:400}
.ghost{
  flex:none;min-height:40px;padding:9px 14px;
  border:3px solid var(--ink);background:var(--paper);color:var(--ink);
  font-size:14px;font-weight:700;cursor:pointer;line-height:1;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
.ghost:active,.ghost.on{background:var(--ink);color:var(--paper)}

/* stage */
.stage{padding:30px 30px 90px;max-width:1500px;margin:0 auto}

/* boxes (black fill, white bold caps by default) */
.box{
  position:relative;
  border:2px solid var(--ink);
  background:var(--ink);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:28px 14px 12px;
  min-width:0;
}
.box .meta{font-weight:700;font-size:clamp(11px,1.25vw,15px);opacity:.82;letter-spacing:.02em;text-align:center}
.box .meta.big{font-size:clamp(18px,2.2vw,30px);opacity:1}
.box .hdr{
  width:100%;text-align:center;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  line-height:1.05;word-break:break-word;outline:none;
}
.box .hdr:empty::before{content:attr(data-ph);opacity:.45;font-weight:700}

/* top client box */
.titlebox{
  width:100%;padding:30px 20px;margin-bottom:calc(var(--gap) + 6px);
}
.titlebox .hdr{font-size:40px;letter-spacing:.12em}

/* level-1 grid: 5 across, big boxes that fill the screen */
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.grid .box{aspect-ratio:1/.62;font-size:24px}
.grid .box .hdr{font-size:24px}

/* free-form deeper levels: two rectangle sizes, resizable */
.canvas{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:flex-start}
.box.rect{width:230px;height:78px}
.box.rect-lg{width:340px;height:100px}
.box.rect .hdr{font-size:16px}
.box.rect-lg .hdr{font-size:19px}
.box.resizable{resize:both;overflow:hidden;min-width:140px;min-height:58px}

/* per-box control strip (top, so the resize grip stays clear) */
.tools{
  position:absolute;left:0;right:0;top:0;
  display:flex;align-items:stretch;height:22px;
  border-bottom:2px solid currentColor;
}
.tools button{
  flex:1;border:none;background:transparent;cursor:pointer;
  font-size:12px;font-weight:700;line-height:1;color:inherit;
  display:flex;align-items:center;justify-content:center;
}
.tools button + button{border-left:2px solid currentColor}
.tools .swatch{width:24px;flex:none}
.tools .swatch i{display:block;width:11px;height:11px;border:1.5px solid currentColor}
.tools .del{flex:none;width:28px}

/* USE mode: whole box is a tap target, no tools strip */
.box.tap{cursor:pointer;padding:18px 34px 18px 18px;user-select:none;-webkit-user-select:none}
.box.tap:active{transform:scale(.98)}
.box.tap.opens::after{
  content:"\203A";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:34px;line-height:1;font-weight:400;opacity:.5;
}
.box.tap.link::after{
  content:"\2197";position:absolute;right:13px;top:50%;transform:translateY(-50%);
  font-size:18px;line-height:1;opacity:.6;
}
.grid .box.tap{padding:14px 26px 14px 14px}
.titlebox.tap,.box.tap.titlebox{padding:24px 16px}
.titlebox.tap::after{content:none}

/* add-box node */
.addnode{
  border:3px dashed var(--hair);background:var(--paper);color:#aaa;
  display:flex;align-items:center;justify-content:center;
  font-size:42px;font-weight:300;cursor:pointer;
  width:230px;height:112px;
}
.addnode.grid-add{width:auto;height:auto;aspect-ratio:1/.6;font-size:38px}
.addnode:active{background:#f2f2f2}

.empty-hint{
  width:100%;text-align:center;color:#999;
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:13px;margin:26px 0 16px;
}

/* native color picker hidden, triggered programmatically */
.picker{position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0}

/* shape menu popover */
.shape-menu{
  position:fixed;z-index:20;background:var(--paper);border:3px solid var(--ink);
  display:flex;flex-direction:column;min-width:200px;
}
.shape-menu button{
  border:none;background:var(--paper);cursor:pointer;color:var(--ink);
  font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:15px 16px;text-align:left;
}
.shape-menu button + button{border-top:2px solid var(--ink)}
.shape-menu button:active{background:var(--ink);color:var(--paper)}

/* mode toggle button */
.mode-toggle{
  display:block;width:calc(100% - 32px);max-width:1120px;
  margin:0 auto 36px;padding:17px;
  background:var(--ink);color:var(--paper);border:3px solid var(--ink);
  font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:15px;
  cursor:pointer;
}
.mode-toggle.editing{background:var(--paper);color:var(--ink)}

/* live (clean) view */
.live-title{
  font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  text-align:center;font-size:30px;margin-bottom:28px;
}
.live-cols{display:flex;flex-wrap:wrap;gap:28px 32px;align-items:flex-start}
.live-item{display:flex;flex-direction:column;gap:9px}
.lbox{
  background:var(--ink);color:#fff;border:2px solid var(--ink);
  padding:9px 18px;text-align:center;min-width:170px;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:15px;
}
.live-cols > .live-item > .lbox{font-size:18px;letter-spacing:.09em;padding:11px 18px}
.live-kids{display:flex;flex-direction:column;gap:9px;padding-left:18px}
body.dark .lbox{box-shadow:0 0 0 1px #3a3a3a}

/* active translate toggle */
.ghost.on{background:var(--ink);color:var(--paper)}
.hdr.translated{cursor:default}

/* dark mode */
body.dark{--paper:#0e0e0e;--ink:#f0f0f0;--hair:#444}
body.dark .box{box-shadow:0 0 0 1px #3a3a3a}
body.dark .addnode{background:#161616}
body.dark .addnode:active{background:#1f1f1f}

/* modal */
.overlay{
  position:fixed;inset:0;z-index:30;
  background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal{
  position:relative;
  background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);
  max-width:440px;width:100%;max-height:85vh;overflow:auto;
  padding:24px 22px 22px;
}
.modal-x{
  position:absolute;top:8px;right:10px;
  background:none;border:none;color:var(--ink);
  font-size:30px;line-height:1;cursor:pointer;
}
.modal h2{
  font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:14px;
}
.howto{list-style:none;display:flex;flex-direction:column;gap:11px}
.howto li{
  font-family:Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;
  padding-left:18px;position:relative;
}
.howto li::before{content:"\25A0";position:absolute;left:0;top:1px;font-size:9px}

/* tablet / portrait iPad: 4 across, still big */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .grid .box,.grid .box .hdr{font-size:22px}
  .grid .box{aspect-ratio:1/.66}
}
/* phone: 2 across */
@media (max-width:640px){
  .stage{padding:18px 16px 80px}
  .grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .titlebox .hdr{font-size:26px;letter-spacing:.08em}
  .grid .box,.grid .box .hdr{font-size:19px}
  .grid .box{aspect-ratio:1/.7}
}