/* Layout */
body { background: var(--gray-100); min-height: 100vh; display: flex; flex-direction: column; }
.demo-banner { background: #3b2a00; color: #ffe8a3; text-align: center; font-size: .85rem; padding: 6px 12px; }
@media (max-width: 600px) { .demo-banner { font-size: .76rem; } }
.portal-top { background: #fff; border-bottom: 4px solid var(--gold-500); }
.portal-top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.portal-top .brand img { width: auto; height: 52px; }
.top-user { display: flex; align-items: center; gap: 12px; }
.top-user form { margin: 0; }
.top-name { font-weight: 700; color: var(--navy-800); font-size: .92rem; }
@media (max-width: 600px) { .top-name { display: none; } }
.btn-xs { padding: 6px 12px; font-size: .82rem; }

.portal-shell { display: grid; grid-template-columns: 230px 1fr; gap: 28px; padding-top: 28px; padding-bottom: 48px; flex: 1; width: 100%; }
@media (max-width: 860px) { .portal-shell { grid-template-columns: 1fr; gap: 16px; } }
.portal-nav ul { list-style: none; margin: 0; padding: 8px; background: #fff; border: 1px solid var(--gray-300); border-radius: 10px; position: sticky; top: 16px; }
.portal-nav a { display: block; padding: 9px 12px; border-radius: 6px; text-decoration: none; color: var(--navy-800); font-weight: 600; font-size: .93rem; }
.portal-nav a:hover { background: var(--gray-100); }
.portal-nav a[aria-current="page"] { background: var(--navy-800); color: #fff; }
.portal-nav .nav-sep { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); font-weight: 800; padding: 14px 12px 6px; }
.nav-menu-btn { display: none; }
@media (max-width: 860px) {
  .portal-shell { padding-top: 14px; gap: 12px; }
  .portal-nav ul { position: static; margin-top: 6px; }
  .portal-nav a { padding: 10px 12px; }
  .nav-menu-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: #fff; color: var(--navy-800);
    border: 1px solid var(--gray-300); border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
  .nav-menu-icon { font-size: 1.1rem; }
  .nav-menu-label { flex: 1; }
  .nav-menu-hint { font-size: .78rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: .08em; }
  .js .portal-nav:not(.open) ul { display: none; }
}
.portal-main { min-width: 0; }
.portal-public { padding-top: 40px; padding-bottom: 56px; flex: 1; width: 100%; }
.portal-main h1 { font-size: 1.7rem; margin-bottom: 6px; }
.lede { color: var(--gray-700); margin: 0 0 22px; max-width: 760px; }

.panel { background: #fff; border: 1px solid var(--gray-300); border-radius: 10px; padding: 22px; margin-bottom: 20px; }
.panel h2 { font-size: 1.15rem; margin: 0 0 12px; }
.panel h3 { font-size: 1rem; margin: 16px 0 8px; }
.panel a { overflow-wrap: anywhere; }
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel-grid > * { min-width: 0; }
@media (max-width: 1000px) { .panel-grid { grid-template-columns: 1fr; } }
.muted { color: var(--gray-500); font-size: .9rem; }
.small { font-size: .85rem; }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-weight: 600; font-size: .95rem; }
.alert-success { background: #e3f1e4; color: #1d5a20; border: 1px solid #b9dcbb; }
.alert-error { background: #fbe4e2; color: #8c1d17; border: 1px solid #f1bcb7; }
.alert-info { background: var(--blue-100); color: var(--navy-800); border: 1px solid #c5d7ee; }

/* Status */
.status-band { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 10px; color: #fff; margin-bottom: 20px; }
.status-band .dot { width: 16px; height: 16px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(255,255,255,.25); flex-shrink: 0; }
.status-green { background: #1f6b2a; } .status-amber { background: #8a5a00; } .status-red { background: #8c1d17; } .status-gray { background: var(--gray-700); }
.status-band strong { font-size: 1.05rem; }
.st-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .78rem; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.st-pill.green { background: #e3f1e4; color: #1d5a20; } .st-pill.amber { background: #fdf1d6; color: #7a5200; } .st-pill.red { background: #fbe4e2; color: #8c1d17; }

.steps-list { list-style: none; margin: 0; padding: 0; }
.steps-list li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--gray-300); }
.steps-list li:last-child { border-bottom: 0; }
.tick { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: .8rem; }
.tick.done { background: var(--green-600); color: #fff; } .tick.pending { background: #fdf1d6; color: #7a5200; } .tick.todo { background: var(--gray-100); color: var(--gray-500); border: 2px solid var(--gray-300); }
.steps-list .t { font-weight: 700; color: var(--navy-800); }
.panel.all-done { display: flex; align-items: center; gap: 14px; padding-top: 14px; padding-bottom: 14px; align-self: start; }
.panel.all-done .tick { width: 32px; height: 32px; font-size: 1rem; flex: none; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: .95rem; }
.kv dt { color: var(--gray-500); font-weight: 600; } .kv dd { margin: 0; }

.reminders { list-style: none; margin: 0; padding: 0; }
.reminders li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--gray-300); font-size: .93rem; }
.reminders li:last-child { border-bottom: 0; }
@media (max-width: 600px) { .reminders li { flex-direction: column; gap: 2px; } }
.due { font-weight: 800; white-space: nowrap; } .due.soon { color: #8a5a00; } .due.late { color: #8c1d17; }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; background: #fff; }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--gray-300); text-align: left; vertical-align: top; }
.tbl th { background: var(--gray-100); color: var(--gray-700); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--gray-300); border-radius: 10px; }

/* Forms */
.form-row { display: grid; gap: 6px; margin-bottom: 14px; }
.form-row label { font-size: .9rem; color: var(--navy-800); }
.form-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.form-inline .form-row { margin: 0; flex: 1 1 180px; }
.field-error { color: var(--red-600); font-size: .85rem; font-weight: 600; }
input[type="password"], input[type="date"], input[type="number"], input[type="file"] { font: inherit; font-size: 1rem; width: 100%; padding: 11px 13px; border: 1px solid var(--gray-300); border-radius: var(--radius); background: #fff; }
input[type="number"] { max-width: 120px; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .95rem; }
.checkbox input { margin-top: 4px; }
.btn-danger { background: #fff; color: var(--red-600); border-color: #f1bcb7; }
.btn-row-tight { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline; margin: 0; }

/* Auth */
.auth-card { max-width: 460px; margin: 0 auto; background: #fff; border: 1px solid var(--gray-300); border-top: 5px solid var(--gold-500); border-radius: 12px; padding: 30px; }
.auth-card h1 { font-size: 1.5rem; }
.qr { display: block; margin: 12px auto; border: 8px solid #fff; box-shadow: 0 0 0 1px var(--gray-300); border-radius: 6px; }
.secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--gray-100); padding: 8px 10px; border-radius: 6px; word-break: break-all; font-size: .9rem; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 1rem; background: var(--gray-100); padding: 14px; border-radius: 8px; }

/* Credential card */
.cred-wrap { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 24px; align-items: start; }
.cred-wrap > * { min-width: 0; }
@media (max-width: 900px) { .cred-wrap { grid-template-columns: 1fr; } }
.cred { position: relative; background: linear-gradient(150deg, var(--navy-800), var(--navy-900)); color: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 18px 40px rgba(11,27,51,.35); overflow: hidden; }
.cred::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 18px solid rgba(201,164,76,.18); }
.cred-head { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.15); padding-bottom: 12px; margin-bottom: 14px; }
.cred-head img { height: 54px; width: auto; }
.cred-head .k { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-500); font-weight: 800; }
.cred-head .t { font-family: var(--font-serif); font-weight: 900; font-size: 1.15rem; }
.cred-name { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 900; margin: 0 0 2px; }
.cred-seat { color: #cdd8e6; font-size: .95rem; margin-bottom: 12px; }
.cred-body { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; }
.cred-body > * { min-width: 0; }
.cred-body dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: .85rem; }
.cred-body dt { color: #9fb0c6; } .cred-body dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.cred-body dd.cred-email { overflow-wrap: normal; word-break: normal; }
.cred-src { display: block; font-weight: 400; font-size: .74rem; color: #9fb0c6; margin-top: 1px; }
.cred-qr { background: #fff; padding: 6px; border-radius: 8px; width: 120px; height: 120px; }
.cred-status { margin-top: 14px; display: inline-flex; gap: 8px; align-items: center; font-weight: 800; font-size: .85rem; padding: 6px 12px; border-radius: 999px; }
.cred-status.green { background: #2e7d32; } .cred-status.amber { background: #a86f00; } .cred-status.red { background: #b3261e; }
@media (max-width: 600px) {
  .cred { padding: 18px; }
  .cred-name { font-size: 1.3rem; }
  .cred-body { grid-template-columns: 1fr; }
  .cred-body dl { grid-template-columns: auto 1fr; }
  .cred-qr { justify-self: center; width: 150px; height: 150px; }
}

/* Verify page */
.verify-card { max-width: 620px; margin: 0 auto; background: #fff; border: 1px solid var(--gray-300); border-radius: 14px; overflow: hidden; }
.verify-card .vhead { padding: 22px 24px; color: #fff; display: flex; gap: 14px; align-items: center; }
.verify-card .vhead .big { font-size: 1.35rem; font-family: var(--font-serif); font-weight: 900; }
.verify-card .vbody { padding: 22px 24px; }

/* Posts and notes */
.post { background: #fff; border: 1px solid var(--gray-300); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.post .who { font-weight: 700; color: var(--navy-800); font-size: .92rem; }
.post .when { color: var(--gray-500); font-size: .8rem; }
.post .body { white-space: pre-wrap; margin: 8px 0 0; font-size: .95rem; overflow-wrap: anywhere; }
.post.hidden-post { opacity: .55; border-style: dashed; }
textarea { min-height: 90px; }
.group-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.group-card { display: block; background: #fff; border: 1px solid var(--gray-300); border-top: 4px solid var(--navy-800); border-radius: 10px; padding: 16px; text-decoration: none; color: inherit; }
.group-card:hover { border-top-color: var(--gold-500); box-shadow: var(--shadow); color: inherit; }
.group-card .k { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-600); font-weight: 800; }
.group-card h3 { margin: 4px 0; font-size: 1.05rem; }

/* Home */
.home-hero { background: var(--navy-800); color: #fff; border-radius: 14px; padding: 40px; margin-bottom: 26px; }
.home-hero h1 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.home-hero p { color: #cdd8e6; max-width: 680px; font-size: 1.05rem; }

.portal-foot { background: var(--navy-900); color: #b8c5d7; font-size: .85rem; margin-top: auto; }
.portal-foot a { color: #e3e9f2; }
.portal-foot-inner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 20px 6px; }
.portal-foot-note { padding: 0 20px 16px; color: #8fa0b6; font-size: .78rem; }

@media print {
  .demo-banner, .portal-top, .portal-nav, .portal-foot, .no-print, .alert { display: none !important; }
  body { background: #fff; } .portal-shell { display: block; padding: 0; }
  .cred { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.w-100 { width: 100%; } .mt { margin-top: 16px; } .auth-wide { max-width: 560px; } .narrow { max-width: 640px; }
.stats-mini { font-size: .92rem; color: var(--gray-700); } code { font-size: .85rem; }

/* Workspace */
.st-pill.gray { background: var(--gray-100); color: var(--gray-700); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.panel-head h2 { margin: 0; }
.prewrap { white-space: pre-wrap; }
.grow { flex: 1 1 280px; }
.ws-nav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--gray-300); margin: 0 0 20px; }
.ws-nav a { padding: 9px 14px; font-weight: 700; font-size: .92rem; color: var(--gray-700); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.ws-nav a:hover { color: var(--navy-800); }
.ws-nav a[aria-current="page"] { color: var(--navy-800); border-bottom-color: var(--gold-500); }
.ws-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.ws-stat { display: block; background: #fff; border: 1px solid var(--gray-300); border-radius: 10px; padding: 14px 16px; text-decoration: none; color: inherit; }
.ws-stat .n { display: block; font-family: var(--font-serif); font-weight: 900; font-size: 1.45rem; color: var(--navy-800); }
.ws-stat .l { display: block; font-size: .82rem; color: var(--gray-500); font-weight: 600; }
.ws-stat.late .n { color: #8c1d17; }
a.ws-stat:hover { border-color: var(--navy-700); }
@media (max-width: 760px) {
  .ws-stats { grid-template-columns: 1fr 1fr; }
  .ws-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ws-nav::-webkit-scrollbar { display: none; }
  .ws-nav a { padding: 8px 10px; font-size: .86rem; white-space: nowrap; flex: 0 0 auto; }
}
@media (max-width: 600px) { .ws-stat .n { font-size: 1.2rem; } }
.sheet-group { margin-bottom: 26px; }
.sheet-group h3 { margin: 0 0 8px; }
.fee-form { border-top: 1px solid var(--gray-300); padding-top: 14px; }
details > summary { list-style: none; cursor: pointer; display: inline-flex; }
details > summary::-webkit-details-marker { display: none; }

/* Printable payment sheet */
.sheet-doc { background: #fff; border: 1px solid var(--gray-300); border-radius: 10px; padding: 26px; margin-top: 10px; }
.sheet-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 2px solid var(--navy-800); padding-bottom: 12px; margin-bottom: 14px; }
.sheet-head h2 { margin: 4px 0; }
.sheet-kicker { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); font-weight: 700; }
.sheet-meta { text-align: right; font-size: .9rem; }
.sheet-scroll { overflow-x: auto; margin-bottom: 14px; }
.sheet-tbl { font-size: .86rem; min-width: 560px; }
.sheet-tbl tr.case-total td { background: var(--gray-100); font-weight: 700; }
.sheet-tbl tr.grand th { font-size: .95rem; background: #fff; border-top: 2px solid var(--navy-800); }
.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; font-size: .85rem; color: var(--gray-700); }
.sig-line { border-bottom: 1px solid #000; height: 34px; margin-bottom: 6px; }
@media (max-width: 640px) { .sheet-doc { padding: 16px; } .sheet-meta { text-align: left; } .sig-grid { grid-template-columns: 1fr; gap: 24px; } }
@media print {
  .print-sheet .portal-main > h1, .print-sheet .ws-nav { display: none !important; }
  .sheet-doc { border: 0; padding: 0; margin: 0; }
  .sheet-tbl { font-size: 10pt; min-width: 0; }
  .sheet-scroll { overflow: visible; }
  .tbl-wrap { border: 0; }
}

/* Workspace: field */
.case-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 18px; }
@media (max-width: 600px) { .case-actions .btn { flex: 1 1 45%; text-align: center; justify-content: center; } }
.attempt-h { margin-bottom: 4px; }
.attempt-form { max-width: 640px; }
.geo-line { font-size: .88rem; font-weight: 700; color: #7a5200; background: #fdf1d6; border-radius: 8px; padding: 9px 12px; margin-bottom: 14px; }
.geo-line.ok { color: #1d5a20; background: #e3f1e4; }
.outcomes { border: 0; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.outcomes legend { font-weight: 700; margin-bottom: 8px; }
.outcome { display: flex; gap: 8px; align-items: center; border: 2px solid var(--gray-300); border-radius: 10px; padding: 12px; font-weight: 700; font-size: .92rem; cursor: pointer; background: #fff; min-height: 52px; }
.outcome:has(input:checked) { border-color: var(--navy-800); background: var(--blue-100); }
.outcome input { width: 20px; height: 20px; flex: none; }
@media (max-width: 420px) { .outcomes { grid-template-columns: 1fr; } }
.timeline { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 3px solid var(--gray-300); }
.timeline li { position: relative; padding: 4px 0 16px 10px; }
.timeline li::before { content: ""; position: absolute; left: -24px; top: 8px; width: 13px; height: 13px; border-radius: 50%; background: var(--gold-500); border: 2px solid #fff; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.thumbs img { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gray-300); display: block; }
.sig-pad { border: 2px dashed var(--gray-300); border-radius: 10px; background: #fff; touch-action: none; }
.sig-pad canvas { width: 100%; height: 140px; display: block; touch-action: none; }
.label { font-weight: 700; }
.sig-img { display: block; max-width: 100%; height: 60px; object-fit: contain; border-bottom: 1px solid #000; margin-bottom: 6px; }
.receipt-doc { margin-bottom: 18px; }
@media print { .receipt-doc { break-after: page; } }
.case-picks { border: 1px solid var(--gray-300); border-radius: 10px; padding: 10px 12px; max-height: 260px; overflow: auto; margin: 0 0 12px; }
.case-picks legend { font-weight: 700; padding: 0 6px; }
.offline-badge { background: #3b2a00; color: #ffe8a3; border-radius: 10px; padding: 10px 14px; font-weight: 700; font-size: .9rem; margin-bottom: 14px; }

/* Group feed */
.group-head { margin-bottom: 14px; }
.group-head h1 { margin: 6px 0 4px; }
.group-head .muted { margin: 0 0 8px; }
.members-fold summary { cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--navy-800); display: inline-flex; gap: 6px; align-items: center; }
.members-fold summary::before { content: "▸"; transition: transform .15s; } .members-fold[open] summary::before { transform: rotate(90deg); }
.members-fold ul { list-style: none; margin: 8px 0 0; padding: 10px 12px; background: #fff; border: 1px solid var(--gray-300); border-radius: 10px; display: grid; gap: 8px; max-width: 520px; }
.members-fold li { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.composer { background: #fff; border: 1px solid var(--gray-300); border-radius: 12px; padding: 10px 12px; margin-bottom: 16px; max-width: 760px; }
.composer textarea { border: 0; padding: 4px 2px; resize: vertical; min-height: 52px; box-shadow: none; }
.composer textarea:focus { outline: none; }
.composer:focus-within { border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(18,40,74,.12); }
.composer-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--gray-100); padding-top: 8px; }
.feed { max-width: 760px; }
.feed .post { padding: 14px 16px 10px; border-radius: 12px; }
.post-head { display: flex; gap: 10px; align-items: center; }
.post-head .who { line-height: 1.2; }
.post-head .when { margin-left: 6px; }
.av { width: 36px; height: 36px; border-radius: 50%; background: var(--navy-800); color: #fff; display: inline-grid; place-items: center; font-weight: 800; font-size: .8rem; flex: none; text-transform: uppercase; }
.av-sm { width: 26px; height: 26px; font-size: .66rem; }
.replies { margin: 10px 0 0; display: grid; gap: 8px; }
.reply { display: flex; gap: 8px; align-items: flex-start; }
.reply-bubble { background: var(--gray-100); border-radius: 12px; padding: 7px 11px; min-width: 0; }
.reply-bubble .who { font-size: .85rem; margin-right: 6px; }
.reply-bubble .body { margin-top: 2px; font-size: .92rem; }
.post-actions { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; border-top: 1px solid var(--gray-100); padding-top: 6px; }
.reply-fold { flex: 1 1 auto; }
.reply-fold summary { cursor: pointer; font-weight: 700; font-size: .85rem; color: var(--blue-600); padding: 4px 0; display: inline-block; }
.reply-form { display: flex; gap: 8px; margin-top: 6px; }
.reply-form input { flex: 1; min-width: 0; padding: 9px 12px; font-size: .95rem; border-radius: 999px; }
.link-btn { background: none; border: 0; padding: 4px 0; color: var(--gray-500); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.link-btn:hover { color: var(--red-600); }

/* Fee calculator */
.panel .fee-group-h { margin-top: 36px; margin-bottom: 12px; }
form.panel > .fee-group-h:first-of-type { margin-top: 24px; }
.fee-extra { margin-top: 32px; }

/* Pager */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; }
.pager-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Safety flags */
.hazard-banner strong { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; margin-bottom: 2px; }
.hazard-banner a { color: inherit; font-weight: 700; }
.hazard-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.hazard-tags .st-pill { text-transform: none; letter-spacing: 0; font-size: .74rem; }
.flag-list { border: 0; padding: 0; margin: 0 0 10px; display: grid; gap: 4px; }

/* Calendar */
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.cal-head h2 { margin: 0; min-width: 10ch; text-align: center; }
.cal-key { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--gray-700); }
.cal-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.cal-dot.hearing { background: var(--navy-700); } .cal-dot.deadline { background: #c58a00; } .cal-dot.late { background: #b42318; }
.cal-grid { border: 1px solid var(--gray-300); border-radius: 10px; overflow: hidden; background: #fff; margin-bottom: 20px; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-row + .cal-row { border-top: 1px solid var(--gray-300); }
.cal-dow div { padding: 6px 8px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); background: var(--gray-100); }
.cal-cell { min-height: 96px; padding: 6px; border-left: 1px solid var(--gray-300); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-cell:first-child { border-left: 0; }
.cal-cell.out { background: var(--gray-100); } .cal-cell.out .cal-n { color: var(--gray-500); }
.cal-n { font-weight: 800; font-size: .85rem; }
.cal-cell.today .cal-n { background: var(--navy-800); color: #fff; border-radius: 999px; padding: 0 7px; align-self: flex-start; }
.cal-item { display: block; font-size: .74rem; line-height: 1.25; padding: 2px 5px; border-radius: 4px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid; }
.cal-item.hearing { background: #e8eef7; color: var(--navy-800); border-color: var(--navy-700); }
.cal-item.deadline { background: #fdf1d6; color: #5c3d00; border-color: #c58a00; }
.cal-item.late { background: #fbe4e2; color: #8c1d17; border-color: #b42318; }
.cal-day { font-size: 1rem; margin: 16px 0 4px; }
.cal-day:first-of-type { margin-top: 0; }
@media (max-width: 640px) { .cal-grid { display: none; } .cal-key { margin-left: 0; } }

/* Assignment board */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.board-col { background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: 10px; padding: 12px; min-width: 0; }
.board-col h2 { font-size: 1.05rem; margin: 0; display: flex; align-items: center; justify-content: space-between; }
.board-n { font-family: var(--font-sans, inherit); font-size: .8rem; background: #fff; border: 1px solid var(--gray-300); border-radius: 999px; padding: 1px 9px; }
.board-card { background: #fff; border: 1px solid var(--gray-300); border-radius: 8px; padding: 10px 12px; margin-top: 10px; display: grid; gap: 3px; }
.board-card.flagged { border-left: 4px solid #b42318; }
.board-move { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.board-move select { flex: 1; min-width: 0; font-size: .85rem; padding: 4px 6px; }
@media (max-width: 760px) { .board { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; } }

/* Sign-in and home: what the portal does */
.signin { display: grid; gap: 28px; align-items: start; }
.signin .auth-card { width: 100%; }
.signin-about h1 { font-size: 1.7rem; margin-bottom: 6px; }
.overview h2 { font-size: 1.2rem; margin: 22px 0 10px; }
.overview p { margin: 0 0 8px; color: var(--gray-700); }
.ov-list, .ov-keycom { margin: 0; padding-left: 20px; color: var(--gray-700); }
.ov-list li, .ov-keycom li { margin: 0 0 8px; }
.ov-list strong, .ov-keycom strong { color: var(--navy-800); }
.ov-rule { border: 0; border-top: 1px solid var(--gray-300); margin: 28px 0 0; }
@media (min-width: 960px) {
  .signin { grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; }
  .signin-form { order: 2; }
  .signin .auth-card { max-width: none; margin: 0; }
}
.signin-about { background: var(--navy-800); color: #cdd8e6; border-radius: 14px; padding: 28px; }
.signin-about h1, .signin-about h2 { color: #fff; }
.signin-about .lede, .signin-about .overview p, .signin-about .ov-list, .signin-about .ov-keycom { color: #cdd8e6; }
.signin-about .ov-list strong, .signin-about .ov-keycom strong { color: #fff; }
.signin-about .overview h2:first-child { margin-top: 18px; }