/* =====================================================================
   Nanoq Intranet – Read and understood (1.32.0)
   Built on the arctic tokens (--nq-*) with fallbacks, so the classic design works too.
   ===================================================================== */

.ak-app, .ak-widget {
  --a-surface: var(--nq-surface, var(--bs-paper-bg, #fff));
  --a-ice: var(--nq-ice, rgba(133, 146, 163, 0.09));
  --a-border: var(--nq-frost, var(--bs-border-color, #e4e6e8));
  --a-ink: var(--nq-ink, var(--nanoq-heading, #384551));
  --a-text: var(--nq-text, var(--bs-body-color, #646e78));
  --a-muted: var(--nq-muted, #8592a3);
  --a-accent: var(--nq-accent, var(--nanoq-primary, #6658ea));
  --a-good: var(--nq-aurora, #279c84);
  --a-warn: #a7720a;
  --a-late: #c2415c;
  --a-shadow: var(--nq-shadow, 0 1px 3px rgba(15, 46, 69, 0.08));
  --a-r: var(--nq-r-card, 14px);
  --a-rc: var(--nq-r-ctrl, 10px);
  --a-display: var(--nq-display, inherit);
}
[data-bs-theme=dark] .ak-app, [data-bs-theme=dark] .ak-widget {
  --a-ice: var(--nq-ice, rgba(255, 255, 255, 0.04));
  --a-warn: #e7c15a;
  --a-late: #f0849b;
}

/* ---------- Tabs ---------- */
.ak-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.ak-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  color: var(--a-text) !important; text-decoration: none; font-weight: 600; font-size: 0.9rem;
  border: 1px solid var(--a-border); background: var(--a-surface);
}
.ak-tab i { font-size: 1.1rem; color: var(--a-muted); }
.ak-tab:hover { border-color: var(--a-accent); }
.ak-tab.is-active { background: var(--a-accent); border-color: var(--a-accent); color: #fff !important; }
.ak-tab.is-active i { color: #fff; }
.ak-app .nq-count.is-live { background: var(--a-late); color: #fff; }
.ak-tab.is-active .nq-count { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* ---------- Common ---------- */
.ak-h { font-family: var(--a-display); font-size: 1.05rem; color: var(--a-ink); margin: 6px 0 12px; display: flex; align-items: center; gap: 8px; }
.ak-empty { text-align: center; padding: 40px 16px; background: var(--a-surface); border: 1px dashed var(--a-border); border-radius: var(--a-r); margin-bottom: 18px; }
.ak-empty > i { font-size: 2.6rem; color: var(--a-accent); }
.ak-empty.is-good > i { color: var(--a-good); }
.ak-empty h3 { font-family: var(--a-display); font-size: 1.15rem; margin: 8px 0 6px; color: var(--a-ink); }
.ak-empty p { color: var(--a-text); max-width: 520px; margin: 0 auto 6px; }
.ak-back { display: inline-flex; align-items: center; gap: 2px; font-size: 0.88rem; font-weight: 600; margin-bottom: 12px; color: var(--a-muted) !important; text-decoration: none; }
.ak-back:hover { color: var(--a-accent) !important; }
.ak-help { color: var(--a-muted); font-size: 0.82rem; margin: 6px 0 0; }
.ak-muted { color: var(--a-muted); font-size: 0.88rem; margin: 0; }
.ak-sub { display: block; color: var(--a-muted); font-size: 0.8rem; margin-top: 2px; }
.ak-alert { background: color-mix(in srgb, var(--a-late) 10%, var(--a-surface)); color: var(--a-late); border-radius: var(--a-rc); padding: 10px 14px; font-weight: 600; margin: 12px 0 0; }
.ak-ok { background: color-mix(in srgb, var(--a-good) 12%, var(--a-surface)); color: var(--a-good); border-radius: var(--a-rc); padding: 10px 14px; font-weight: 600; margin: 12px 0 0; }
.ak-notice { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--a-r); background: var(--a-ice); color: var(--a-text); margin: 0 0 16px; }
.ak-notice > i { font-size: 1.3rem; color: var(--a-accent); flex: 0 0 auto; }
.ak-notice p { margin: 0; }
.ak-notice strong { color: var(--a-ink); }
.ak-notice.is-warn { background: color-mix(in srgb, var(--a-warn) 12%, var(--a-surface)); }
.ak-notice.is-warn > i { color: var(--a-warn); }
.ak-notice.is-inline { margin: 0 0 14px; font-size: 0.88rem; }
.ak-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; background: var(--a-ice); color: var(--a-muted); margin: 4px 6px 0 0; }
.ak-chip.is-late { background: color-mix(in srgb, var(--a-late) 14%, var(--a-surface)); color: var(--a-late); }
.ak-chip.is-warn { background: color-mix(in srgb, var(--a-warn) 16%, var(--a-surface)); color: var(--a-warn); }
.ak-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; background: var(--a-ice); color: var(--a-muted); }
.ak-pill.is-good { background: color-mix(in srgb, var(--a-good) 15%, var(--a-surface)); color: var(--a-good); }
.ak-pill.is-late { background: color-mix(in srgb, var(--a-late) 14%, var(--a-surface)); color: var(--a-late); white-space: normal; }
.ak-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 700; color: var(--a-muted); }
.ak-kind i { color: var(--a-accent); font-size: 1rem; }

/* ---------- To read: cards ---------- */
.ak-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 24px; }
.ak-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; background: var(--a-surface);
  border: 1px solid var(--a-border); border-top: 4px solid var(--a-accent); border-radius: var(--a-r);
  box-shadow: var(--a-shadow); color: var(--a-text) !important; text-decoration: none;
}
.ak-card:hover { border-color: var(--a-accent); }
.ak-card.is-late { border-top-color: var(--a-late); }
.ak-card strong { font-family: var(--a-display); color: var(--a-ink); font-size: 1.05rem; overflow-wrap: anywhere; }
.ak-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--a-accent) 13%, var(--a-surface)); color: var(--a-accent); font-size: 1.5rem; }
.ak-card.is-late .ak-card-icon { background: color-mix(in srgb, var(--a-late) 13%, var(--a-surface)); color: var(--a-late); }
.ak-card-meta { font-size: 0.82rem; color: var(--a-muted); }
.ak-card .ak-chip { margin: 0; }
.ak-card-btn { margin-top: auto; }
.ak-card-btn.btn { margin-top: 8px; }
.ak-done-list { list-style: none; padding: 0; margin: 0 0 20px; background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--a-r); }
.ak-done-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--a-border); }
.ak-done-list li:first-child { border-top: 0; }
.ak-done-list a { display: flex; align-items: center; gap: 8px; color: var(--a-ink) !important; text-decoration: none; font-weight: 600; min-width: 0; }
.ak-done-list a span { overflow-wrap: anywhere; }
.ak-done-list a i { color: var(--a-good); font-size: 1.2rem; flex: 0 0 auto; }
.ak-done-list small { color: var(--a-muted); white-space: nowrap; }

/* ---------- Read and confirm ---------- */
.ak-read { background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--a-r); box-shadow: var(--a-shadow); overflow: hidden; max-width: 860px; }
.ak-read-head { padding: 22px 26px 10px; }
.ak-read-head h3 { font-family: var(--a-display); font-size: 1.45rem; color: var(--a-ink); margin: 6px 0 4px; overflow-wrap: anywhere; }
.ak-meta { color: var(--a-muted); font-size: 0.86rem; margin: 0 0 4px; }
.ak-read > .ak-notice { margin: 6px 26px 0; }
.ak-content { padding: 14px 26px 22px; color: var(--a-text); font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.ak-content p { margin: 0 0 1em; }
.ak-content img { max-width: 100%; height: auto; }
.ak-content table { max-width: 100%; display: block; overflow-x: auto; }
.ak-intro { padding: 0 0 12px; margin-bottom: 14px; border-bottom: 1px solid var(--a-border); }
.ak-src-title { font-family: var(--a-display); font-size: 1.15rem; color: var(--a-ink); margin: 0 0 10px; }
.ak-src-link { margin: 8px 0 0; font-weight: 600; }
.ak-file { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--a-rc); background: var(--a-ice); flex-wrap: wrap; }
.ak-file > i { font-size: 2.2rem; color: var(--a-accent); }
.ak-file-text { flex: 1 1 220px; min-width: 0; }
.ak-file-text strong { display: block; color: var(--a-ink); overflow-wrap: anywhere; }
.ak-file-text small { color: var(--a-muted); }
.ak-file-text p { margin: 6px 0 0; font-size: 0.9rem; }
.ak-confirm { padding: 18px 26px 22px; border-top: 1px solid var(--a-border); background: color-mix(in srgb, var(--a-accent) 5%, var(--a-surface)); display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.ak-confirm.is-done { background: color-mix(in srgb, var(--a-good) 10%, var(--a-surface)); }
.ak-confirm .ak-alert, .ak-confirm .ak-help { flex: 1 1 100%; margin: 0; }
.ak-agree { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 320px; font-weight: 600; color: var(--a-ink); cursor: pointer; }
.ak-agree input { width: 1.25rem; height: 1.25rem; margin-top: 2px; flex: 0 0 auto; accent-color: var(--a-accent); }
.ak-done { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--a-good); }
.ak-done i { font-size: 1.6rem; }

/* ---------- Manage: list and status ---------- */
.ak-manage-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.ak-table-wrap { background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--a-r); overflow: hidden; margin-bottom: 18px; }
.ak-table { margin: 0; }
.ak-table th { font-size: 0.78rem; text-transform: none; color: var(--a-muted); font-weight: 700; white-space: nowrap; }
.ak-table td { vertical-align: middle; }
.ak-list-title { display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 700; color: var(--a-ink) !important; text-decoration: none; }
.ak-list-title i { color: var(--a-accent); font-size: 1.15rem; margin-top: 2px; }
.ak-list-title span { overflow-wrap: anywhere; }
.ak-list-title:hover span { text-decoration: underline; }
.ak-col-bar { min-width: 150px; }
.ak-who-sm, .ak-dept-sm { display: none; }
.ak-bar { height: 8px; border-radius: 999px; background: var(--a-ice); overflow: hidden; }
.ak-bar span { display: block; height: 100%; background: var(--a-accent); border-radius: 999px; }
.ak-bar.is-full span { background: var(--a-good); }
.ak-bar-txt { display: block; color: var(--a-muted); font-size: 0.78rem; margin-top: 4px; white-space: nowrap; }
.ak-status-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ak-status-head h3 { font-family: var(--a-display); font-size: 1.35rem; color: var(--a-ink); margin: 4px 0 2px; overflow-wrap: anywhere; }
.ak-status-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.ak-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ak-kpi { background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--a-r); padding: 14px 16px; }
.ak-kpi strong { display: block; font-family: var(--a-display); font-size: 1.7rem; line-height: 1.1; color: var(--a-ink); }
.ak-kpi span { color: var(--a-muted); font-size: 0.84rem; }
.ak-kpi.is-good strong { color: var(--a-good); }
.ak-kpi.is-late strong { color: var(--a-late); }
.ak-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 12px; }
.ak-filter { display: inline-flex; border: 1px solid var(--a-border); border-radius: 999px; overflow: hidden; background: var(--a-surface); }
.ak-filter button { border: 0; background: transparent; padding: 6px 14px; font-size: 0.86rem; font-weight: 600; color: var(--a-text); }
.ak-filter button.is-active { background: var(--a-accent); color: #fff; }
.ak-person { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.ak-person img { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; }
.ak-person a { color: var(--a-ink) !important; text-decoration: none; overflow-wrap: anywhere; }
.ak-box { background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--a-r); padding: 20px 22px; margin-bottom: 16px; }
.ak-box h3 { font-family: var(--a-display); font-size: 1.1rem; color: var(--a-ink); margin: 0 0 12px; }
.ak-vlist { padding-left: 1.2rem; margin: 0 0 14px; color: var(--a-text); }
.ak-vlist li { margin-bottom: 8px; }
.ak-vlist small { color: var(--a-muted); }
.ak-vlist p { margin: 2px 0 0; font-size: 0.9rem; }
.ak-newver { border-top: 1px solid var(--a-border); padding-top: 14px; }
.ak-newver .btn { margin-top: 8px; }

/* ---------- Form ---------- */
.ak-form { max-width: 860px; }
.ak-label { display: block; font-weight: 700; color: var(--a-ink); font-size: 0.88rem; margin: 0 0 6px; }
.ak-field { margin: 0 0 16px; border: 0; padding: 0; min-width: 0; }
.ak-field[hidden] { display: none; }
.ak-field.has-error .form-control, .ak-field.has-error .form-select { border-color: var(--a-late); }
.ak-err { color: var(--a-late); font-size: 0.84rem; font-weight: 600; margin: 6px 0 0; }
.ak-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ak-kind-opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--a-border); border-radius: var(--a-rc); cursor: pointer; font-weight: 600; color: var(--a-text); background: var(--a-surface); margin: 0; }
.ak-kind-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ak-kind-opt i { font-size: 1.3rem; color: var(--a-accent); }
.ak-kind-opt.is-active { border-color: var(--a-accent); background: color-mix(in srgb, var(--a-accent) 8%, var(--a-surface)); color: var(--a-ink); box-shadow: 0 0 0 1px var(--a-accent) inset; }
.ak-kind-opt:focus-within { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.ak-kind-opt.is-off { opacity: 0.45; cursor: not-allowed; }
.ak-check { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--a-text); cursor: pointer; }
.ak-check[hidden] { display: none; }
.ak-pick { margin: 8px 0 0 26px; padding: 10px 12px; border-radius: var(--a-rc); background: var(--a-ice); }
.ak-pick[hidden] { display: none; }
.ak-pick-search { margin-bottom: 8px; }
.ak-people { max-height: 260px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 12px; }
.ak-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); gap: 12px; }
.ak-save { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 10px; }
.ak-msg { color: var(--a-muted); font-size: 0.88rem; }

/* ---------- Widget ---------- */
.ak-widget .ak-w-list { list-style: none; margin: 0; padding: 0; }
.ak-widget .ak-w-list li + li { margin-top: 8px; }
.ak-widget .ak-w-list a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--a-rc); background: color-mix(in srgb, var(--a-accent) 9%, var(--a-surface)); text-decoration: none; }
.ak-widget .ak-w-list a.is-late { background: color-mix(in srgb, var(--a-late) 10%, var(--a-surface)); }
.ak-widget .ak-w-list i { font-size: 1.4rem; color: var(--a-accent); flex: 0 0 auto; }
.ak-widget .ak-w-list a.is-late i { color: var(--a-late); }
.ak-widget .ak-w-list span { display: flex; flex-direction: column; min-width: 0; }
.ak-widget .ak-w-list strong { color: var(--a-ink); overflow-wrap: anywhere; font-size: 0.92rem; }
.ak-widget .ak-w-list small { color: var(--a-muted); }
.ak-widget .ak-w-list a.is-late small { color: var(--a-late); }
.ak-widget .ak-w-more { color: var(--a-muted); font-size: 0.84rem; margin: 8px 0 0; }
.ak-widget .ak-w-done { display: flex; align-items: center; gap: 8px; color: var(--a-muted); margin: 0; font-size: 0.9rem; }
.ak-widget .ak-w-done i { color: var(--a-good); font-size: 1.4rem; flex: 0 0 auto; }
body.nanoq-arctic #ack-widget .Nanoq-widget-header h6::before { content: "\ec53"; }

/* ---------- 1.42.0: the quiz ---------- */
.ak-quiz { margin: 0; padding: 18px 26px 6px; border-top: 1px solid var(--a-border); }
.ak-quiz-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.ak-quiz-icon { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--a-accent) 12%, var(--a-surface)); color: var(--a-accent); font-size: 1.3rem; }
.ak-quiz-head h4 { font-family: var(--a-display); font-size: 1.08rem; color: var(--a-ink); margin: 2px 0 2px; }
.ak-quiz-head p { margin: 0; color: var(--a-muted); font-size: 0.88rem; }
.ak-quiz-q { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--a-border); border-radius: var(--a-rc); background: var(--a-ice); min-width: 0; }
.ak-quiz-q legend { float: left; width: 100%; display: flex; gap: 8px; align-items: flex-start; font-size: 0.95rem; font-weight: 600; color: var(--a-ink); margin: 0 0 8px; }
.ak-quiz-q legend + * { clear: both; }
.ak-quiz-q legend small { font-weight: 400; color: var(--a-muted); }
.ak-quiz-no { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--a-accent); color: #fff; font-size: 0.78rem; display: grid; place-items: center; margin-top: 1px; }
.ak-quiz-opt { display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 7px 10px; border-radius: 8px; cursor: pointer; color: var(--a-text); overflow-wrap: anywhere; }
.ak-quiz-opt:hover { background: color-mix(in srgb, var(--a-accent) 6%, transparent); }
.ak-quiz-opt input { width: 1.1rem; height: 1.1rem; margin-top: 3px; flex: none; accent-color: var(--a-accent); }
.ak-quiz-opt:has(input:checked) { background: color-mix(in srgb, var(--a-accent) 10%, var(--a-surface)); color: var(--a-ink); }
.ak-quiz-q.is-wrong { border-color: var(--a-late); background: color-mix(in srgb, var(--a-late) 7%, var(--a-surface)); }
.ak-quiz-msg { margin: 6px 0 0; font-size: 0.84rem; font-weight: 600; color: var(--a-late); }
.ak-quiz.is-passed .ak-quiz-q { border-color: color-mix(in srgb, var(--a-good) 50%, var(--a-border)); }
.ak-quiz-done { display: flex; align-items: center; gap: 6px; margin: 0; flex: 1 1 100%; color: var(--a-text); font-size: 0.88rem; }
.ak-quiz-done i { color: var(--a-good); }
.ak-quizbox h3 { display: flex; align-items: center; gap: 6px; }
.ak-qb { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ak-qb-q { padding: 12px; border: 1px solid var(--a-border); border-radius: var(--a-rc); background: var(--a-ice); }
.ak-qb-head { display: flex; align-items: center; gap: 4px; }
.ak-qb-head .form-control { flex: 1; min-width: 0; font-weight: 600; margin-right: 4px; }
.ak-qb-no { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--a-accent); color: #fff; font-size: 0.8rem; display: grid; place-items: center; margin-right: 6px; }
.ak-qb-opts { list-style: none; margin: 8px 0 0 2.2rem; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ak-qb-opts li { display: flex; align-items: center; gap: 6px; }
.ak-qb-opts .form-control { flex: 1; min-width: 0; }
.ak-qb-opts li.is-right .form-control { border-color: var(--a-good); }
.ak-qb-right { flex: none; display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--a-border); background: var(--a-surface); font-size: 0.76rem; color: var(--a-muted); cursor: pointer; }
.ak-qb-right input { accent-color: var(--a-good); }
.ak-qb-opts li.is-right .ak-qb-right { border-color: var(--a-good); color: var(--a-good); font-weight: 700; }
.ak-qb-addopt { color: var(--a-accent); margin: 4px 0 0 2.2rem; padding: 2px 0; display: inline-flex; align-items: center; gap: 3px; }
.ak-qb-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.ak-qb-bar .btn { display: inline-flex; align-items: center; gap: 4px; }
.ak-qb-pass { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.86rem; color: var(--a-text); }
.ak-qb-pass[hidden] { display: none; }
.ak-qb-pass .form-select { width: auto; }
.ak-quizbox.has-error .ak-qb { outline: 2px solid var(--a-late); outline-offset: 4px; border-radius: var(--a-rc); }
.ak-qstats h3 { display: flex; align-items: center; gap: 6px; }
.ak-qstat-list { margin: 10px 0 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 10px; }
.ak-qstat-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 180px) 3.2rem; gap: 10px; align-items: center; }
.ak-qstat-text { color: var(--a-ink); font-size: 0.9rem; overflow-wrap: anywhere; }
.ak-qstat-text small { display: block; color: var(--a-good); font-size: 0.78rem; }
.ak-qstat-bar { height: 8px; border-radius: 999px; background: var(--a-ice); border: 1px solid var(--a-border); overflow: hidden; }
.ak-qstat-bar i { display: block; height: 100%; background: var(--tone); }
.ak-qstat-list li b { text-align: right; color: var(--tone); }
.ak-qstat-list li.is-good { --tone: var(--a-good); }
.ak-qstat-list li.is-warn { --tone: var(--a-warn); }
.ak-qstat-list li.is-late { --tone: var(--a-late); }

[data-bs-theme=dark] .ak-quiz-no, [data-bs-theme=dark] .ak-qb-no { color: #0e1b26; }

/* ---------- Phone ---------- */
@media (max-width: 767.98px) {
  .ak-read-head, .ak-content, .ak-confirm { padding-left: 16px; padding-right: 16px; }
  .ak-read > .ak-notice { margin: 6px 16px 0; }
  .ak-read-head h3 { font-size: 1.2rem; }
  .ak-confirm .btn { width: 100%; }
  .ak-col-who, .ak-col-dept { display: none; }
  .ak-who-sm { display: inline; }
  .ak-dept-sm { display: block; color: var(--a-muted); font-size: 0.78rem; margin: 2px 0 0 40px; }
  .ak-table th, .ak-table td { padding: 0.6rem 0.6rem; }
  .ak-col-bar { min-width: 110px; }
  .ak-done-list li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ak-pick { margin-left: 0; }
  .ak-people { grid-template-columns: 1fr; }
  .ak-box { padding: 16px; }
  .ak-file .btn { width: 100%; }
  .ak-quiz { padding-left: 16px; padding-right: 16px; }
  .ak-qb-opts, .ak-qb-addopt { margin-left: 0; }
  .ak-qb-head { flex-wrap: wrap; }
  .ak-qb-head .form-control { flex-basis: calc(100% - 2.4rem); margin-right: 0; }
  .ak-qb-head .nq-icon-btn:first-of-type { margin-left: auto; }
  .ak-qstat-list li { grid-template-columns: minmax(0, 1fr) 3.2rem; }
  .ak-qstat-list .ak-qstat-bar { grid-column: 1 / -1; grid-row: 2; }
}