/* Public pages (landing, privacy, terms, contact). Taken from the approved mockup styles
   (site/mockups/mock.css) without the mockup-only controls. Loaded after app/css/app.css and
   app/css/gradova.css, which hold the design system. */

/* Type: small labels in the body face, sentence case. Mono and all-caps labels read as template chrome. */
.eyebrow{font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none;font-weight:600}
.pill,.lbl,.cols b,nav.tabs .badge,.toolbar .count,.col-h span,.hello .meta,.target .num{font-family:var(--body);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none}
.lbl{font-size:12px;font-weight:600}
.pill{font-weight:600}

/* Brand mark: a compass needle instead of the water drop */
.brand .mark svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}

/* Sidebar grouped by what the student is doing */
nav.tabs .grp{font-size:12px;font-weight:600;color:var(--side-muted);opacity:.75;padding:14px 10px 4px}
nav.tabs .grp:first-child{padding-top:0}
.side .bottom{margin-top:auto;display:flex;flex-direction:column;gap:2px;border-top:1px solid rgb(255 255 255 / .08);padding-top:12px}
.langrow{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;font-size:13.5px;color:var(--side-muted)}
.acct{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--side-ink);font-size:13.5px}
.acct .av{width:30px;height:30px;border-radius:50%;background:#2a5a61;display:grid;place-items:center;font-weight:600;font-size:12.5px;color:#fff;flex:none}
.acct small{display:block;color:var(--side-muted);font-size:12px}

/* Today: upcoming strip */
.upcoming{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.up{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow)}
.up .when{flex:none;width:46px;text-align:center;border-radius:10px;background:var(--accent-soft);color:var(--accent);padding:5px 0;line-height:1.1}
.up .when b{display:block;font-family:var(--display);font-size:20px}
.up .when span{font-size:11.5px;font-weight:600}
.up.copper .when{background:var(--copper-soft);color:var(--copper)}
.up .what b{display:block;font-size:14.5px}
.up .what span{font-size:13px;color:var(--muted)}

/* Applications: board cards */
.board{grid-auto-columns:minmax(220px,1fr)}
.col-h{font-family:var(--display);font-size:14.5px}
.app-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 13px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);cursor:grab}
.app-card:hover{border-color:var(--accent)}
.app-card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.app-card .co{font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;gap:6px}
.app-card .ro{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.25}
.app-card .row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted)}
.app-card .next{font-size:12.5px;padding:5px 8px;border-radius:7px;background:var(--sunk);color:var(--ink)}
.app-card .next.due{background:var(--copper-soft);color:var(--copper);font-weight:600}
.score{font-weight:700;font-size:12px;padding:2px 7px;border-radius:6px;font-variant-numeric:tabular-nums}
.score.hi{background:var(--goodbg);color:var(--good)} .score.mid{background:var(--warnbg);color:var(--warn)}
.excite{display:inline-flex;gap:2px;color:var(--copper)}
.excite i{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;display:block}
.excite i.on{background:currentColor}
.check{display:flex;align-items:center;gap:6px}
.check .m{width:46px;height:5px;border-radius:99px;background:var(--sunk);overflow:hidden}
.check .m i{display:block;height:100%;background:var(--accent)}
.closed{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px}

/* Application details panel */
.detail{display:grid;grid-template-columns:minmax(0,1fr);gap:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.detail .dh{padding:20px 22px 0;display:flex;flex-direction:column;gap:10px}
.dtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 16px;overflow-x:auto}
.dtabs button{border:0;background:none;padding:10px 10px;font-size:14px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.dtabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.dbody{padding:18px 22px 22px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px}
.cl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cl li{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.cl li:last-child{border:0}
.cl .bx{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-strong);flex:none;display:grid;place-items:center}
.cl .done .bx{background:var(--accent);border-color:var(--accent);color:#fff}
.cl .done span{color:var(--muted);text-decoration:line-through}
.cl small{margin-left:auto;color:var(--faint);font-size:12.5px}
.tpl{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--raised);display:flex;flex-direction:column;gap:8px;font-size:14px}
.tpl p{margin:0}
.ev{border-left:3px solid var(--accent);padding:4px 0 4px 10px;font-size:13px;color:var(--muted)}
.ev b{color:var(--ink);font-weight:600}