/* ============================================================ app.css — shared chrome + dense components for the LOGGED-IN member & admin surfaces. Built on base.css tokens. These pages are deliberately DENSE: no wasted space, minimal scrolling. Pair with class="dir-summit" on for the forest accent. ============================================================ */ .app { background: var(--canvas-2); min-height: 100vh; } /* ---- App header ---- */ .app-hdr { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 22px; background:var(--surface); border-bottom:1px solid var(--line); } .app-hdr__l { display:flex; align-items:center; gap:18px; } .app-hdr__brand img { height:30px; display:block; } .modnav { display:flex; gap:2px; } .modnav a { font-size:14px; font-weight:600; color:var(--ink-3); text-decoration:none; padding:7px 12px; border-radius:8px; white-space:nowrap; } .modnav a:hover { background:var(--canvas-2); color:var(--ink); } .modnav a.on { background:var(--forest); color:#fff; } .acct { display:flex; align-items:center; gap:9px; } .acct__nm { font-size:14px; font-weight:600; color:var(--ink-2); } .acct__av { width:32px; height:32px; border-radius:50%; background:var(--forest); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; } @media (max-width:760px){ .modnav .hide-sm, .acct__nm { display:none; } } /* ---- Sub bar ---- */ .subbar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:8px 22px; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:30; } .subbar__l { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .subbar h1 { font-size:19px; letter-spacing:-.01em; } .subbar .site { display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--ink-2); font-size:14px; background:var(--canvas-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 12px; cursor:pointer; } .subbar .site .ic { color:var(--forest-2); } .badge-alpha { font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--fb); background:var(--fb-bg); border-radius:var(--r-pill); padding:3px 9px; } /* ---- Segmented control ---- */ .seg { display:inline-flex; background:var(--canvas-2); border:1px solid var(--line); border-radius:10px; padding:3px; gap:3px; } .seg button { font:inherit; font-size:14px; font-weight:700; color:var(--ink-3); background:none; border:none; cursor:pointer; padding:7px 16px; border-radius:7px; display:inline-flex; align-items:center; gap:7px; } .seg button.on { background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); } .seg .ic { width:16px; height:16px; } /* ---- Work area ---- */ .work { max-width:1240px; margin:0 auto; padding:16px 22px 28px; } .work--wide { max-width:1320px; } /* ---- Dense panel ---- */ .panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } .panel--forest { border:1.5px solid var(--forest); } .panel__head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 15px; border-bottom:1px solid var(--line); background:var(--surface-tint); } .panel__head h3 { font-size:15px; letter-spacing:-.01em; } .panel__head .cap { font-size:12.5px; color:var(--ink-4); font-weight:600; } .panel__body { padding:14px 15px; } .panel__body--flush { padding:0; } /* ---- Dense grid helpers ---- */ .cols { display:grid; gap:14px; } .cols-2 { grid-template-columns:1fr 1fr; } .cols-3 { grid-template-columns:repeat(3,1fr); } .cols-side { grid-template-columns:1fr 320px; align-items:start; } @media (max-width:820px){ .cols-2,.cols-3,.cols-side { grid-template-columns:1fr; } } /* ---- Dense table ---- */ .dtable { width:100%; border-collapse:collapse; font-size:14px; } .dtable th { text-align:left; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap; } .dtable td { padding:8px 12px; border-bottom:1px solid var(--line-soft); color:var(--ink-2); vertical-align:middle; } .dtable tr:last-child td { border-bottom:none; } .dtable tr:hover td { background:var(--surface-tint); } .dtable .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .dtable .muted { color:var(--ink-4); } .dtable .name { font-weight:600; color:var(--ink); } /* ---- Inline price input ---- */ .priceedit { display:inline-flex; align-items:center; gap:2px; border:1.5px solid var(--line); border-radius:7px; background:var(--surface); padding:0 8px; height:32px; } .priceedit:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .priceedit .pfx { color:var(--ink-4); font-weight:600; font-size:13px; } .priceedit input { width:58px; border:none; outline:none; font:inherit; font-weight:700; font-size:14px; color:var(--ink); background:none; text-align:right; -moz-appearance:textfield; } .priceedit input::-webkit-outer-spin-button, .priceedit input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } .priceedit .sfx { color:var(--ink-4); font-weight:600; font-size:12px; } /* ---- Fields ---- */ .field { display:flex; flex-direction:column; gap:5px; } .field > label { font-size:12.5px; font-weight:700; color:var(--ink-3); } .field .in { font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:8px; padding:8px 11px; min-height:38px; outline:none; } .field .in:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } /* ---- Mini list rows ---- */ .rowlist { display:flex; flex-direction:column; } .lrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--line-soft); } .lrow:first-child { border-top:none; } .lrow__main { min-width:0; } .lrow__name { font-weight:700; color:var(--ink); font-size:14.5px; } .lrow__meta { font-size:12.5px; color:var(--ink-4); } /* ---- Pills / status ---- */ .pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; border-radius:var(--r-pill); padding:3px 10px; } .pill-green { background:var(--good-bg); color:var(--green-deep); } .pill-amber { background:var(--warn-bg); color:var(--warn); } .pill-blue { background:var(--fb-bg); color:var(--fb); } .pill-grey { background:var(--canvas-2); color:var(--ink-3); } /* ---- Hook marker (for Claude Code handoff) ---- */ .hook { display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--ink-4); padding:8px 11px; background:var(--canvas-2); border:1px dashed var(--border-strong, var(--line)); border-radius:8px; } .hook .ic { width:14px; height:14px; margin-top:1px; flex:none; color:var(--gold); } /* small buttons inherit from base .btn */ .btn-xs { font-size:13px; padding:6px 12px; min-height:34px; border-width:1.5px; border-radius:8px; }