/* Personal Tower ledger — one quiet vertical rail, ordered like the real climb. */
.tower-ledger-head{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:32px;align-items:end;padding:2.4rem 0 24px;border-bottom:1px solid var(--line)}
.tower-ledger-copy{max-width:760px}.tower-ledger-copy h1{max-width:680px;font-size:32px;line-height:1.05;font-weight:700}.tower-ledger-copy p{max-width:650px;margin-top:16px;color:var(--muted);font-size:12px}
.tower-next-stamp{display:grid;justify-items:center;padding:16px 16px;border:1px solid var(--line);border-top:2px solid var(--green);background:var(--ink2);border-radius:8px}
.tower-next-stamp span,.tower-next-stamp small{color:var(--muted);font:500 12px var(--ui),monospace;text-transform: none}.tower-next-stamp strong{margin:4px 0;color:var(--green);font:750 40px var(--ui),serif}.tower-next-stamp small{text-align:center;text-transform:none}
.tower-toolbar{display:flex;align-items:center;gap:16px;margin:16px 0;padding:12px 16px;border:1px solid var(--line);background:var(--ink2)}
.tower-toolbar label{display:flex;align-items:center;gap:8px;color:var(--muted);font:500 12px var(--ui),monospace;text-transform: none}.tower-toolbar input[type=number]{width:76px;padding:8px 8px;border:1px solid var(--line);color:var(--text);background:var(--ink);font-family:var(--ui),monospace}.tower-toolbar input[type=checkbox]{accent-color:var(--green)}
.tower-sync-state,.extension-status{display:grid;grid-template-columns:9px auto;margin-left:auto;gap:0 8px;align-items:center}.tower-sync-state>span,.extension-status>span{grid-row:1/3;width:9px;height:9px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 4px color-mix(in srgb, var(--muted) 15%, transparent)}.tower-sync-state.connected>span,.extension-status.connected>span{background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb, var(--sage) 20%, transparent)}.tower-sync-state strong,.extension-status strong{font-size:12px}.tower-sync-state small,.extension-status small{color:var(--muted);font-size:12px}.extension-status{margin:16px 0 0}
.tower-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--line);background:var(--line)}.tower-summary article{display:grid;gap:4px;padding:16px;background:var(--ink2)}.tower-summary span,.tower-summary small{color:var(--muted);font-size:12px}.tower-summary span{font-family:var(--ui),monospace;text-transform: none}.tower-summary strong{color:var(--text);font:650 24px var(--ui),serif}
.tower-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:16px 0 16px;color:var(--muted);font-size:12px}.tower-legend span{display:flex;align-items:center;gap:4px}.tower-legend b{margin-left:auto;color:var(--green);font-family:var(--ui),monospace}.tower-dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}.tower-dot.next{background:var(--green)}.tower-dot.done{background:var(--green)}
.tower-rail{position:relative;display:grid;gap:12px;padding:0 0 3rem 72px}.tower-rail:before{content:"";position:absolute;top:0;bottom:3rem;left:35px;width:1px;background:linear-gradient(var(--green),var(--line) 18%,var(--line))}
.tower-floor{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);min-height:110px;border:1px solid var(--line);background:var(--ink2)}.tower-floor:before{content:"";position:absolute;left:-42px;top:33px;width:12px;height:12px;border:3px solid var(--ink);border-radius:50%;background:var(--muted)}.tower-floor.is-next{border-color:var(--green)}.tower-floor.is-next:before{background:var(--green);box-shadow:0 0 0 5px color-mix(in srgb, var(--sage) 20%, transparent)}.tower-floor.is-done:before{background:var(--green)}
.tower-floor-mark{display:grid;align-content:center;justify-items:center;gap:.12rem;border-right:1px solid var(--line);background:transparent}.tower-floor-mark span,.tower-floor-mark small{color:var(--muted);font:500 12px var(--ui),monospace;text-transform: none}.tower-floor-mark strong{color:var(--text);font:700 24px var(--ui),serif}.tower-floor.is-next .tower-floor-mark strong{color:var(--green)}
.tower-floor-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.tower-mm{display:grid;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center;padding:12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.tower-mm.complete{opacity:.5}.item-art.tower-art{width:50px;height:50px;border-radius:8px}.tower-mm-main{min-width:0}.tower-mm-title,.tower-mm-numbers{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.tower-mm-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.tower-mm-title span{color:var(--muted);font:500 12px var(--ui),monospace;text-transform: none}
.tower-progress{height:6px;border-radius:8px;margin:8px 0 8px;overflow:hidden;background:var(--ink3)}.tower-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--green))}.tower-mm.complete .tower-progress i{background:var(--green)}.tower-mm-numbers{font:500 12px var(--ui),monospace}.tower-mm-numbers b{color:var(--text)}.tower-mm-numbers span{color:var(--muted)}.tower-mm.complete .tower-mm-numbers span{color:var(--green)}.tower-pj{display:block;margin-top:4px;color:var(--muted);font-size:12px}.tower-all-clear{display:grid;gap:4px;padding:32px;border:1px solid var(--line);color:var(--muted);background:var(--ink2)}.tower-all-clear strong{color:var(--green)}
@media(max-width:980px){.tower-summary{grid-template-columns:repeat(2,1fr)}.tower-floor{grid-template-columns:86px minmax(0,1fr)}}
@media(max-width:760px){.tower-ledger-head{grid-template-columns:1fr}.tower-next-stamp{width:160px;justify-self:start}.tower-toolbar{align-items:flex-start;flex-wrap:wrap}.tower-sync-state{width:100%;margin-left:0}.tower-rail{padding-left:43px}.tower-rail:before{left:18px}.tower-floor:before{left:-32px}.tower-floor{grid-template-columns:1fr}.tower-floor-mark{grid-template-columns:auto auto auto;justify-content:start;gap:8px;padding:12px 12px;border-right:0;border-bottom:1px solid var(--line)}.tower-floor-items{grid-template-columns:1fr}}


/* Clickable mastery/floor entries should look clickable; entries the planner
   has no data for should not pretend to be buttons. */
.tower-mm[data-open-item],.tower-cost-item[data-open-item]{cursor:pointer}
.tower-mm[data-open-item]:hover,.tower-mm[data-open-item]:focus-visible{background:var(--ink3)}
.tower-cost-item[data-open-item]:hover,.tower-cost-item[data-open-item]:focus-visible{background:var(--ink3)}
.tower-mm.no-plan,.tower-cost-item.no-plan{cursor:default}
.tower-mm.no-plan .tower-mm-title strong,.tower-cost-item.no-plan b{color:var(--muted)}
.tower-noplan{display:block;margin-top:4px;color:var(--muted);font-size:12px}

/* Shared rhythm: the newer pages were each inventing their own spacing and
   type scale. One set of section headings keeps them reading as one desk. */
.page-intro { padding: 32px 0 8px; }
.page-intro h1 { margin: .2rem 0 4px; }
.page-intro p { color: var(--muted); max-width: 62ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.tower-pay { color: var(--green) !important; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12px !important; }
.tower-reward-label {
  grid-column: 1 / -1;
  color: var(--green);
  font: 600 12px var(--ui), monospace;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: .15rem;
}

/* Green was doing two jobs on this page: the progress bar of something you are
   working on, and the mark on something already finished. A colour that means
   both means neither, so finished rows go quiet and green is left to mean
   "this is what is still in front of you". */
.tower-mm.complete { opacity: .42; }
.tower-mm.complete .tower-progress i { background: var(--line); }
.tower-mm.complete .tower-mm-numbers span { color: var(--muted); }
.tower-mm.complete .item-art.tower-art { filter: grayscale(1); opacity: .8; }

/* The nearest unfinished requirement on each floor is the one that decides
   whether you can climb, so give it the accent rather than sharing it out. */
.tower-mm.working .tower-progress i { background: var(--green); }

/* The owner's own workbook rates how hard each mastery is, or says it is not
   worth chasing. Shown on the rail because "No route data" was not enough. */
.tower-rating {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  padding: 1px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  color: var(--muted);
}
.tower-rating.is-blocked { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, var(--line)); }
.tower-rating.is-slow { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, var(--line)); }
.tower-rating.is-event { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 50%, var(--line)); }
.tower-rating.is-easy { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, var(--line)); }
.tower-rating.is-hard { color: var(--text); }

@media (min-width: 1200px) { .tower-ledger-copy h1 { font-size: 40px; } }

/* A floor's rows are ranked: what you still owe first, closest to done at the
   top, finished ones at the bottom. These badges say at a glance which tier the
   floor wants and whether a quest is waiting on the same item. */
.tower-mm-tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.tower-tier, .tower-questtag {
  padding: 1px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font: 700 12px var(--data), monospace;
  letter-spacing: .02em;
}
.tower-tier.is-gm { color: var(--water); border-color: color-mix(in srgb, var(--water) 45%, var(--line)); }
.tower-tier.is-mm { color: var(--lantern); border-color: color-mix(in srgb, var(--lantern) 45%, var(--line)); }
.tower-questtag { color: var(--sage); border-color: color-mix(in srgb, var(--sage) 45%, var(--line)); }
.tower-mm.complete .tower-tier { color: var(--muted); border-color: var(--line); }

/* The bar carries what is left, the way the game's own mastery bar does. */
.tower-mm-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.tower-left { color: var(--text); font: 500 12px var(--data), monospace; white-space: nowrap; }
.tower-mm.complete .tower-left { color: var(--muted); }
.tower-questtag.is-met { color: var(--muted); border-color: var(--line); }