/* WARDOGS Companion — app shell in the field-manual theme.
   The sidebar is the manual's contents page: parts, numbered chapters, dotted leaders, page numbers. */

:root { --side-w: 248px; }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }
.side {
  width: var(--side-w); flex: 0 0 var(--side-w); position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 30;
  display: flex; flex-direction: column; background: var(--paper-2); border-right: 1px solid var(--ink);
}
.fm-head { padding: .6rem 1.1rem .3rem; display: flex; justify-content: space-between; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.side .brand { display: block; padding: .3rem 1.1rem .8rem; border-bottom: 3px double var(--ink); }
.side .brand-mark { display: none; }
.brand-word { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.7rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.brand-sub { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2); margin-top: .25rem; }
.side-nav { flex: 1; padding: .3rem 0 .4rem; }
.side-group { padding: .5rem 0 .3rem; }
.side-label { display: flex; justify-content: space-between; padding: .2rem 1.1rem .25rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); font-weight: 700; }
.side-item {
  display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: baseline; gap: 0 .35rem;
  padding: .28rem 1.1rem; font-family: var(--serif); font-size: .95rem; color: var(--ink); line-height: 1.35;
}
.side-item img, .side-item svg { display: none; }
.side-item .no { font-family: var(--mono); font-size: .78rem; color: var(--ink-2); }
.side-item .t { position: relative; white-space: nowrap; overflow: hidden; }
.side-item .t::after { content: ""; position: absolute; bottom: .3em; left: 0; right: 0; border-bottom: 1px dotted var(--ink-3); z-index: 0; }
.side-item .t span { position: relative; z-index: 1; background: var(--paper-2); padding-right: .35rem; }
.side-item .pg { font-family: var(--mono); font-size: .78rem; color: var(--ink-2); padding-left: .35rem; }
.side-item:hover .t span, .side-item:hover .no { color: var(--red); }
.side-item.active .t span, .side-item.active .no, .side-item.active .pg { color: var(--red); font-weight: 600; }
.side-item.is-soon { color: var(--ink-3); cursor: default; }
.side-item em { font-style: italic; font-family: var(--serif); font-size: .8rem; color: var(--ink-3); }
.side-foot { border-top: 1px solid var(--ink); padding: .6rem 0 .8rem; }
.side-user { display: flex; align-items: center; gap: .55rem; padding: .35rem 1.1rem .2rem; }
.side-avatar { width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px; border: 1px solid var(--ink); background: #fff; }
.side-user-name { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-logout { margin-left: auto; }
.side-logout button { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.side-logout button:hover { color: var(--red); }
.side-meta { display: block; padding: .3rem 1.1rem 0; font-family: var(--mono); font-size: .68rem; color: var(--ink-3); }
.side-signin { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 0 .35rem; padding: .3rem 1.1rem; font-family: var(--serif); font-size: .95rem; }
.side-signin:hover { color: var(--red); }
.side-signin em { font-style: italic; font-size: .8rem; color: var(--ink-3); }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content main { flex: 1; }
.topbar-mobile { display: none; }
.top { display: none; }

@media (max-width: 900px) {
  .shell { display: block; }
  .side { position: fixed; top: 0; bottom: 0; left: calc(-1 * var(--side-w) - 8px); height: 100vh; transition: left .18s ease; box-shadow: 4px 0 24px rgba(0,0,0,.25); }
  .side.open { left: 0; }
  .topbar-mobile { display: flex; align-items: center; gap: .9rem; padding: .5rem .9rem; background: var(--paper-2); border-bottom: 1px solid var(--ink); position: sticky; top: 0; z-index: 25; }
  .topbar-mobile .brand-word { font-size: 1.2rem; display: inline; }
  .topbar-mobile .brand-sub { display: inline; margin-left: .4rem; }
  .side-toggle { font-family: var(--mono); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: var(--plate); border: 1px solid var(--ink); padding: .4rem .7rem; cursor: pointer; }
}

/* ---------- home: the manual's title page ---------- */
.home-bg { display: none; }
.title-page { max-width: 1240px; margin: 0 auto; padding: 1.6rem 2rem 3rem; }
.fm-header { display: grid; grid-template-columns: 1fr auto; gap: .3rem 2rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); padding-bottom: .6rem; border-bottom: 1px solid var(--ink); }
.fm-header .r { text-align: right; }
.fm-title { text-align: center; padding: 1.5rem 0 1.1rem; border-bottom: 3px double var(--ink); margin-bottom: 1.4rem; }
.fm-title .kicker { font-family: var(--mono); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .5rem; }
.fm-title h1 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.fm-title .sub { margin: .55rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-2); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 2.2rem; align-items: start; }
@media (max-width: 1000px) { .home-grid { grid-template-columns: 1fr; } }

.figure { margin: 0 0 1.4rem; }
.figure img { display: block; width: 100%; height: auto; border: 1px solid var(--ink); filter: saturate(.85) contrast(1.02); }
.figure figcaption { font-family: var(--serif); font-size: .9rem; color: var(--ink-2); padding: .45rem 0 0; }
.figure figcaption b { font-weight: 600; color: var(--ink); }

.contents-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--ink); padding-bottom: .3rem; margin-bottom: .2rem; }
.menu { display: flex; flex-direction: column; }
.menu-row { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .1rem .6rem; align-items: baseline; padding: .8rem 0 .75rem; border-bottom: 1px solid var(--rule-2); color: var(--ink); }
.menu-row .no { grid-row: 1 / span 2; font-family: var(--mono); font-size: .95rem; color: var(--ink-2); padding-top: .2rem; }
.menu-title { grid-column: 2; font-family: var(--serif); font-weight: 600; font-size: 1.35rem; line-height: 1.15; }
.menu-desc { grid-column: 2; color: var(--ink-2); font-size: .95rem; }
.menu-state { grid-column: 3; grid-row: 1 / span 2; font-family: var(--mono); font-size: .78rem; color: var(--ink-3); }
a.menu-row:hover .menu-title { color: var(--red); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.is-soon .menu-title { color: var(--ink-3); }
.menu-foot { padding: 1rem 0 0; font-size: .9rem; color: var(--ink-2); max-width: 60ch; }
.menu-foot .status { margin: 0 0 .4rem; font-family: var(--mono); font-size: .8rem; color: var(--ink); }
.menu-foot-links { display: flex; gap: 1.1rem; margin-top: .4rem; }
.menu-foot-links a { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- panels as appendix tables ---------- */
.hud { background: var(--plate); border: 1px solid var(--ink); padding: 0; }
.hud-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem .8rem; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); margin: 0; background: var(--plate-2); }
.hud-head span:last-child { color: var(--ink-2); }
.hud-body { padding: .7rem .8rem .8rem; }
.hud-caption { font-family: var(--serif); font-style: italic; font-size: .9rem; color: var(--ink-2); padding: .5rem .8rem 0; margin: 0; }
.kit { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tile { display: grid; grid-template-columns: 64px 1fr; grid-template-areas: "img k" "img n" "img p"; gap: .05rem .6rem; align-items: center; background: #fff; border: 1px solid var(--rule); padding: .4rem .55rem .4rem .4rem; }
.tile.wide { grid-column: 1 / -1; grid-template-columns: 120px 1fr auto; grid-template-areas: "img k p" "img n p"; }
.tile img, .tile .tile-img { grid-area: img; width: 100%; height: 44px; object-fit: contain; background: #fff; border: 1px solid var(--rule-2); }
.tile.wide img, .tile.wide .tile-img { height: 66px; }
.tile .k { grid-area: k; font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.tile .n { grid-area: n; font-size: .92rem; line-height: 1.2; color: var(--ink); }
.tile .p { grid-area: p; font-family: var(--mono); font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }
.tile.wide .p { font-size: 1.05rem; align-self: center; }
.kit-foot { display: flex; align-items: center; gap: 1rem; padding: .6rem .8rem; border-top: 1px solid var(--ink); font-family: var(--mono); font-size: .8rem; color: var(--ink-2); }
.kit-foot .btn { margin-left: auto; }
.news { list-style: none; margin: 0; padding: 0; }
.news li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--rule-2); font-size: .95rem; }
.news li:first-child { border-top: 0; }
.news a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--rule); }
.news .mono { color: var(--ink-2); white-space: nowrap; }

/* the old photo header strips are retired in this theme */
.has-head main::before { display: none; }