/* Walnutcraft platform design system for signed-in screens (loaded after style.css and lms.css).
   Tokens from style.css: --violet #7d62ff, --violet-deep #301e8c, --violet-soft #f0edff, --ink #0d0c14, --ink-2 #666373,
   --surface #faf9ff, --line #eceaf4, --green #17b26a, --green-deep #0d7a47, --green-soft #ecfdf3, --radius 14px.
   See platform/docs/DESIGN.md for the component vocabulary. */
:root{--orange:#d9480f;--orange-soft:#fff2eb;--blue:#2f6fed;--blue-soft:#eef4ff;--red:#b42318;--red-soft:#fef3f2;--shadow:0 12px 32px rgba(13,12,20,.08)}
.wrap.narrow{max-width:820px}
/* header additions */
.nav-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;color:var(--ink);border:1px solid var(--line);background:#fff}
.nav-bell:hover{border-color:var(--violet);color:var(--violet-deep)}
.bell-n{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:999px;background:var(--orange);color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.nav-login{padding:9px 14px}
.app-subnav{background:#fff;border-bottom:1px solid var(--line)}
.app-subnav nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.app-subnav a{display:inline-flex;align-items:center;gap:7px;padding:12px 14px;font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.app-subnav a:hover{color:var(--ink)}.app-subnav a.on{color:var(--violet-deep);border-bottom-color:var(--violet)}
/* building blocks */
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.panel-head h2,.panel-head h3{margin:0;font-size:17px}
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:var(--surface);border:1px dashed #d9d5e8;border-radius:14px;padding:32px 20px}
.empty-state strong{font-family:Lexend,sans-serif;font-size:17px}.empty-state p{margin:0;max-width:440px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.kpi b{font-family:Lexend,sans-serif;font-size:24px;color:var(--violet-deep);line-height:1.2}.kpi span{font-size:12px;color:var(--ink-2);font-weight:600}
.kpi.warn b{color:var(--orange)}.kpi.good b{color:var(--green-deep)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.toolbar select,.toolbar input[type=search],.toolbar input[type=text],.toolbar input[type=date]{font:inherit;font-size:14px;border:1px solid #d9d5e8;border-radius:10px;padding:8px 10px;background:#fff;min-height:40px}
.field{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{font:inherit;font-size:15px;font-weight:400;color:var(--ink);border:1px solid #d9d5e8;border-radius:10px;padding:11px 12px;background:#fff;min-height:44px}
.field input:focus,.field select:focus,.field textarea:focus,.form-col input:focus,.form-col select:focus,.form-col textarea:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 3px rgba(125,98,255,.18)}
.field .hint{font-weight:400;font-size:12px}
.tag-s{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;border-radius:6px;padding:3px 8px;background:var(--violet-soft);color:var(--violet-deep);white-space:nowrap}
.tag-s.good{background:var(--green-soft);color:var(--green-deep)}.tag-s.warn{background:var(--orange-soft);color:var(--orange)}.tag-s.bad{background:var(--red-soft);color:var(--red)}.tag-s.mute{background:#f3f2f7;color:var(--ink-2)}.tag-s.info{background:var(--blue-soft);color:var(--blue)}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red)}
.row-actions{display:inline-flex;gap:6px;flex-wrap:wrap}
.split-2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;align-items:start}@media (max-width:900px){.split-2{grid-template-columns:1fr}}
.list{display:flex;flex-direction:column}.list>*{padding:12px 0;border-top:1px solid var(--line)}.list>*:first-child{border-top:0;padding-top:0}
.avatar{width:36px;height:36px;border-radius:999px;background:var(--violet-soft);color:var(--violet-deep);font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;object-fit:cover}
/* notifications */
.notif-list{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.notif{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;text-decoration:none;color:var(--ink);border-top:1px solid var(--line)}.notif:first-child{border-top:0}
.notif:hover{background:var(--surface)}.notif-dot{width:8px;height:8px;border-radius:999px;margin-top:7px;background:transparent;flex-shrink:0}
.notif.unread{background:#fbfaff}.notif.unread .notif-dot{background:var(--violet)}.notif-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.notif-main strong{font-size:14px}.notif:not(.unread) strong{font-weight:500}.notif-when{white-space:nowrap}
/* LMS: sidebar link, syllabus list, next card */
.side-link{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;padding:8px;border-radius:8px}
.side-link:hover{background:var(--surface);color:var(--ink)}.side-link.on{background:var(--violet-soft);color:var(--violet-deep)}
.mod-list{margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
.next-card{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--violet-deep);color:#fff;border-radius:14px;padding:16px 18px}
.next-card .eyebrow{color:#d9d3ff;margin:0 0 2px;font-size:11px}.next-card strong{font-family:Lexend,sans-serif;font-size:17px}
.next-card .btn,.next-card .btn-primary{background:#fff!important;color:var(--violet-deep)!important;border-color:#fff!important}
.syl-list{display:flex;flex-direction:column;gap:8px}
.syl-part{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--violet-deep);margin-top:10px}
.syl-row{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.syl-row:hover{border-color:var(--violet)}.syl-row.locked{background:var(--surface);color:#8a879c;cursor:not-allowed}.syl-row.locked:hover{border-color:var(--line)}
.syl-row.current{border-color:var(--violet);box-shadow:0 0 0 3px rgba(125,98,255,.12)}
.syl-n{width:32px;height:32px;border-radius:9px;background:var(--violet-soft);color:var(--violet-deep);font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.syl-row.done .syl-n{background:var(--green-soft);color:var(--green-deep)}.syl-row.locked .syl-n{background:#f0eff5;color:#9a97ad}
.syl-main{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.syl-main strong{font-size:15px}.syl-meta{flex-shrink:0;display:inline-flex;align-items:center}
.quads{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.quad{font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;background:#f3f2f7;color:var(--ink-2)}
.quad.done{background:var(--green-soft);color:var(--green-deep)}.quad.part{background:var(--orange-soft);color:var(--orange)}
/* topic page: four-quadrant tabs */
.topic-head{display:flex;flex-direction:column;gap:8px}.topic-head .chip-v{align-self:flex-start}.topic-head p{margin:0}
.qtabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:4px 0 6px}
.qtab{display:flex;align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:14px;background:#fff;min-height:48px}
.qtab:hover{border-color:var(--violet);color:var(--ink)}
.qtab.on{background:var(--violet-deep);border-color:var(--violet-deep);color:#fff}
.qtab-ic{display:inline-flex;flex-shrink:0}.qtab-l{flex:1;white-space:nowrap}.qtab-s{font-size:11px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.qtab.todo .qtab-s,.qtab.na .qtab-s{display:none}
.qtab.done .qtab-s{color:var(--green-deep)}.qtab.part .qtab-s{color:var(--orange)}.qtab.on .qtab-s{color:#d9d3ff}
@media (max-width:620px){.qtabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.under-video{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.under-video>div{display:flex;flex-direction:column}
.read-meta{display:inline-flex;align-items:center;gap:6px}
.sticky-cta{position:sticky;bottom:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);padding:10px;border:1px solid var(--line);border-radius:14px;margin-top:8px}
.topic-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:14px;margin-top:8px}
.topic-foot .link{display:inline-flex;align-items:center;gap:4px}
.q-done{color:var(--green-deep)}.q-part{color:var(--orange)}.q-todo{color:var(--ink-2);font-weight:500}
.rail-card .link{display:block}
.lms-main.topic .objectives{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
/* heatmap + bars (learning gaps, readiness, attainment) */
.heat{border-collapse:separate;border-spacing:3px;font-size:12px}.heat th{font-weight:600;color:var(--ink-2);padding:4px 6px;text-align:left;white-space:nowrap}
.heat td{width:44px;height:30px;border-radius:6px;text-align:center;font-weight:700;color:#fff;background:#d9d5e8}
.heat td.l-none{background:#eceaf4;color:#9a97ad}.heat td.l-low{background:#e5604a}.heat td.l-mid{background:#f2a23a}.heat td.l-high{background:#17b26a}
.bar{display:block;height:8px;border-radius:999px;background:#eceaf4;overflow:hidden}.bar>span{display:block;height:100%;background:var(--violet);border-radius:999px}
.bar.good>span{background:var(--green)}.bar.warn>span{background:#f2a23a}.bar.bad>span{background:#e5604a}
/* threads (discussions, doubts) */
.thread{display:flex;gap:12px;align-items:flex-start}.thread-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.thread-meta{font-size:12px;color:var(--ink-2);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.thread-text{font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.reply{margin-left:48px;padding-left:14px;border-left:2px solid var(--line)}@media (max-width:620px){.reply{margin-left:12px}}
.staff-badge{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--violet-deep);color:#fff;border-radius:5px;padding:2px 6px}
/* calendar agenda */
.agenda-day{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet-deep);margin:14px 0 6px}
.agenda-item{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.agenda-time{font-family:Lexend,sans-serif;font-size:14px;min-width:64px;color:var(--violet-deep)}
@media print{.site-header,.topbar,.site-footer,.app-subnav,.lms-side,.lms-rail,.no-print{display:none!important}}

/* header buttons: real padding (was text touching the border) */
.site-nav .btn{padding:10px 16px;white-space:nowrap}.site-nav .nav-login{padding:9px 14px}
.nav-logout{white-space:nowrap}
.rail-card .link{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.lms-rail .rail-card{min-width:0}