/* Flashcards (/cards) — owner-only */
.page-hero.compact { padding-bottom: .5rem; }
.page-hero.compact h1 { margin-bottom: .5rem; }
.cards-nav { display: flex; gap: .25rem; flex-wrap: wrap; margin: .5rem 0 1rem; border-bottom: 1px solid var(--line); }
.cards-nav a { padding: .45rem .8rem; color: var(--ink-2); border-bottom: 2px solid transparent; text-decoration: none; font-weight: 500; }
.cards-nav a.active { color: var(--navy); border-bottom-color: var(--teal); }
.cards-counts { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.cards-counts .cnt { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1.25rem; min-width: 7rem; }
.cards-counts .cnt strong { display: block; font-size: 1.8rem; font-family: var(--serif); }
.cards-counts .cnt span { color: var(--ink-3); font-size: .85rem; }
.cnt.new strong { color: #1e63c4; } .cnt.learn strong { color: var(--red); } .cnt.review strong { color: var(--green); }
.cards-release { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 1rem 0; }
.cards-exam { margin: 1rem 0; }
.cards-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: .5rem 0 1.5rem; }
.cards-table th, .cards-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cards-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.cards-table tr.week-row th { background: var(--bg-soft); font-family: var(--serif); }
.cards-table tr.upcoming td { color: var(--ink-3); }
.cards-table td.good { color: var(--green); font-weight: 600; } .cards-table td.warn { color: var(--amber); font-weight: 600; } .cards-table td.bad { color: var(--red); font-weight: 600; }
.cards-table .actions { white-space: nowrap; } .cards-table .actions > * { margin-right: .5rem; }
.cards-table input[type=date] { font: inherit; padding: .1rem .25rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-elev); color: var(--ink); }
.cards-table input[type=date].inferred { border-style: dashed; color: var(--ink-2); }
.bar { display: inline-block; width: 4rem; height: .45rem; background: var(--bg-soft); border-radius: 4px; vertical-align: middle; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--teal); }
.linklike { background: none; border: 0; padding: 0; color: var(--teal); cursor: pointer; font: inherit; text-decoration: underline; }
.linklike.danger { color: var(--red); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: var(--bg-elev); border: 0; padding: .35rem .8rem; cursor: pointer; font: inherit; color: var(--ink-2); }
.seg button.on { background: var(--navy); color: #fff; }
.mini-bars { width: 100%; height: 100px; display: block; margin: .5rem 0 1.5rem; }
.mini-bars rect { fill: var(--teal); opacity: .75; } .mini-bars rect.hi { fill: var(--navy); opacity: 1; }
.mini-bars .lbl { font-size: 11px; fill: var(--ink-3); }

/* review */
.review-bar { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: .75rem; }
.review-bar .spacer { flex: 1; }
.review-bar .cnt strong { font-size: 1.1rem; }
.flag-select { width: auto; font: inherit; padding: .25rem; border-radius: 6px; border: 1px solid var(--line); }
.review-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
               padding: 1.5rem 1.25rem; min-height: 14rem; max-width: 820px; margin: 0 auto;
               /* tall cards scroll inside the card so the answer buttons stay on screen */
               max-height: calc(100vh - 24rem); max-height: calc(100dvh - 24rem); overflow-y: auto; overscroll-behavior: contain; }
.review-answer { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin: 1rem auto; max-width: 820px; position: sticky; bottom: .5rem; }
.review-answer .show-answer { min-width: 16rem; }
.review-answer .rate { display: flex; flex-direction: column; align-items: center; min-width: 6.5rem; gap: .1rem; }
.review-answer .rate .ivl { font-size: .8rem; opacity: .85; }
.rate-1 { background: var(--red); border-color: var(--red); } .rate-2 { background: var(--amber); border-color: var(--amber); }
.rate-3 { background: var(--green); border-color: var(--green); } .rate-4 { background: #1e63c4; border-color: #1e63c4; }
kbd { font-family: var(--mono); font-size: .7rem; opacity: .7; border: 1px solid currentColor; border-radius: 4px; padding: 0 .25rem; margin-left: .25rem; }
.review-info { max-width: 820px; margin: 1rem auto; }
.cards-tags { word-break: break-all; }
.cards-tags a { margin-right: .5rem; }
.cards-done { max-width: 600px; margin: 2rem auto; text-align: center; }

/* browse */
.browse-search { display: flex; gap: .5rem; margin-bottom: .25rem; }
.browse-search input[type=search] { flex: 1 1 auto; width: auto; min-width: 0; font: inherit; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 8px; }
.browse-search select { flex: 0 0 auto; width: auto; font: inherit; border-radius: 8px; border: 1px solid var(--line); }
.browse-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.browse-help { margin: 0 0 .75rem; } .browse-help summary { cursor: pointer; } .browse-help p { margin: .35rem 0 0; }

/* filter panel */
.browse-filters { font-size: .86rem; position: sticky; top: .75rem; max-height: calc(100dvh - 1.5rem); overflow: auto; overscroll-behavior: contain;
    border-right: 1px solid var(--line); padding-right: .75rem; }
.browse-filters section, .browse-filters details { border-bottom: 1px solid var(--line); padding: .55rem 0; }
.browse-filters h3 { display: inline; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0; }
.browse-filters section h3 { display: block; margin-bottom: .45rem; }
.browse-filters summary { cursor: pointer; list-style: none; margin-bottom: .35rem; }
.browse-filters summary::-webkit-details-marker { display: none; }
.browse-filters summary::before { content: "▸"; display: inline-block; width: 1rem; color: var(--ink-3); }
.browse-filters details[open] > summary::before { content: "▾"; }
.browse-filters .count { display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: 999px; background: var(--teal); color: #fff; font-size: .7rem; letter-spacing: 0; }
.seg-full { display: flex; width: 100%; } .seg-full button { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; user-select: none; color: var(--ink-2); }
.chip input { margin: 0; accent-color: var(--teal); }
.chip.on { border-color: var(--teal); background: var(--teal-soft); color: var(--ink); }
.check-tree label { cursor: pointer; display: inline; }
.check-tree input { accent-color: var(--teal); margin: 0 .2rem 0 0; vertical-align: -1px; }
.check-tree input:disabled { opacity: .6; }
.twisty-gap { display: inline-block; width: 1rem; }
.lecture-list { max-height: 16rem; overflow: auto; padding-left: 1.2rem !important; }
.lecture-list label { display: block; padding: .05rem 0; }
.tag-find { width: 100%; box-sizing: border-box; font: inherit; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: 8px; margin-top: .35rem; background: var(--bg-elev); color: var(--ink); }
.tag-suggest { list-style: none; padding: 0; margin: .35rem 0 0; max-height: 16rem; overflow: auto; }
.tag-suggest li { padding: .15rem 0; line-height: 1.25; overflow-wrap: anywhere; }
.tag-suggest .muted { display: block; font-size: .72rem; }
.tag-pill { margin: 0 .25rem .25rem 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* results */
.browse-main { min-width: 0; }
.active-filters { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-height: 1.6rem; margin-bottom: .35rem; }
.active-filters .pill { font-weight: 500; }
.browse-count { flex-wrap: wrap; gap: .5rem; }
.browse-table { table-layout: fixed; width: 100%; }
.browse-table col.c-check { width: 2.2rem; } .browse-table col.c-deck { width: 12rem; } .browse-table col.c-lec { width: 6.5rem; }
.browse-table col.c-state { width: 6.2rem; } .browse-table col.c-due { width: 4.6rem; } .browse-table col.c-s { width: 2.8rem; }
.browse-table td { overflow: hidden; }
.browse-table .clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.browse-table tbody tr { cursor: pointer; }
.browse-table tbody tr:hover { background: var(--bg-soft); }
.browse-table tr.active { background: var(--teal-soft); }
.browse-table tr.suspended td.sortfield { color: var(--ink-3); background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(183,121,31,.08) 6px 12px); }
.browse-bulk { background: var(--bg-soft); padding: .5rem; border-radius: 8px; flex-wrap: wrap; }
.browse-bulk select { font: inherit; max-width: 14rem; }

/* card details: a drawer over the right side, so the results keep their width */
.browse-detail { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(480px, 100vw); box-sizing: border-box; overflow: auto;
    overscroll-behavior: contain; background: var(--bg-elev); border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(0,0,0,.35); padding: .9rem; }
.browse-detail .card-face { border: 1px solid var(--line); border-radius: 8px; padding: .75rem; margin: .5rem 0; font-size: .9rem; }
.browse-detail .card-facts select { max-width: 100%; }
.browse-detail .cards-tags a { overflow-wrap: anywhere; }
.tree, .tree ul { list-style: none; padding-left: .9rem; margin: 0; }
.tree { padding-left: 0; }
.tree li { margin: .12rem 0; overflow-wrap: anywhere; }
.twisty { background: none; border: 0; cursor: pointer; width: 1rem; padding: 0; color: var(--ink-3); }
.card-facts dt { font-weight: 600; margin-top: .4rem; } .card-facts dd { margin: 0; }
.card-facts select { font: inherit; font-size: .8rem; margin-left: .25rem; }
.pill .x { background: none; border: 0; cursor: pointer; color: inherit; padding: 0 0 0 .2rem; }
@media (max-width: 1100px) {
  .browse-table col.c-lec, .browse-table col.c-s { width: 0; }
  .browse-table th:nth-child(4), .browse-table td:nth-child(4), .browse-table .c-s { display: none; }
}
@media (max-width: 800px) {
  .browse-layout { grid-template-columns: 1fr; }
  .browse-filters { position: static; max-height: none; border-right: 0; padding-right: 0; }
  .browse-table col.c-deck { width: 7rem; } .browse-table .c-due { display: none; }
}

/* planner */
.planner-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; margin-bottom: 1.5rem; }
.planner-day { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 8px; padding: .5rem; min-height: 6rem; }
.planner-day.today { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-soft); }
.planner-day h4 { margin: 0 0 .35rem; font-size: .85rem; }
.planner-day .pill { display: inline-block; margin: .1rem; }
.planner-form { display: grid; gap: .5rem; max-width: 640px; }
.planner-form label { display: grid; gap: .2rem; font-size: .9rem; }
.planner-form label.inline { display: inline-flex; gap: .3rem; margin-right: 1rem; }
.planner-form input[type=text], .planner-form input[type=number], .planner-form input[type=date] { font: inherit; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 6px; }
.rules-row td { background: var(--bg-soft); }
.rule-input { min-width: 26rem; font: inherit; padding: .3rem .5rem; }
.suggest { list-style: none; padding: 0; margin: .25rem 0; font-size: .85rem; columns: 2; }
@media (max-width: 700px) { .planner-week { grid-template-columns: repeat(2, 1fr); } .rule-input { min-width: 0; width: 100%; } }
.lectures-table select { font: inherit; font-size: .85rem; width: auto; min-width: 6.5rem; }
.lectures-table input[type=date] { width: auto; }
.cards-table td .btn.small { padding: .1rem .45rem; font-size: .75rem; }
.row > input[type=text], .row > input[type=date] { width: auto; flex: 0 1 auto; }

iframe.card-face { display: block; width: 100%; border: 0; min-height: 60px; background: #fff; color-scheme: light; }
.card-image-viewer { position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; padding: max(.5rem, env(safe-area-inset-top)) .5rem max(.5rem, env(safe-area-inset-bottom));
    border: 0; box-sizing: border-box; background: #111820; color: #fff; }
.card-image-viewer[open] { display: flex; flex-direction: column; gap: .5rem; }
.card-image-viewer::backdrop { background: #111820; }
.card-image-toolbar { display: flex; justify-content: center; gap: .5rem; flex: none; }
.card-image-toolbar button { color: inherit; background: #263542; border: 1px solid #8296aa; border-radius: .5rem; padding: .65rem; font: inherit; }
.card-image-stage { flex: 1 1 0; min-width: 0; min-height: 0; overflow: auto; background: #fff; overscroll-behavior: contain; touch-action: pan-x pan-y; }
.card-image-stage img { display: block; max-width: none; max-height: none; height: auto; margin: 0; }
.card-recordings .site-audio { padding: .75rem; margin-bottom: .75rem; border: 1px solid var(--line); border-radius: 8px; text-align: center; }
.card-recordings button { font: inherit; padding: .45rem .8rem; cursor: pointer; }
.card-recordings audio { display: block; width: 100%; max-width: 420px; margin: .5rem auto; }
.card-recordings a { display: inline-block; margin: .25rem; }
.card-recordings .site-audio-status { font-size: .9rem; margin-top: .5rem; }

.decks-table td.num, .decks-table th.num { text-align: right; width: 5.5rem; font-variant-numeric: tabular-nums; }
.decks-table td.new { color: #1e63c4; font-weight: 600; } .decks-table td.learn { color: var(--red); font-weight: 600; } .decks-table td.review { color: var(--green); font-weight: 600; }

.flag-form { max-width: 820px; margin: 0 auto .75rem; display: grid; gap: .5rem; }
.flag-form textarea { font: inherit; width: 100%; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; }
.btn.on { background: var(--amber-soft); color: var(--amber); }
.card-explanations { border-top: 1px dashed var(--line); margin-top: 1rem; padding-top: .75rem; text-align: left; }
.card-explanations summary { cursor: pointer; color: var(--teal); font-weight: 600; }
.card-explanations .md { font-size: .95rem; }
.flag-pending { text-align: right; margin: .5rem 0 0; }

.flag-item { margin: .75rem 0; }
.flag-item.closed { opacity: .6; }
.flag-front { font-family: var(--serif); margin: .5rem 0; }
.flag-item .md, .card-explanations .md { line-height: 1.5; }

/* review bar: the count the current card comes from is underlined, as in Anki */
.review-bar .cnt { font-size: .85rem; color: var(--ink-3); padding-bottom: 2px; border-bottom: 2px solid transparent; }
.review-bar .cnt.current { border-bottom-color: currentColor; color: var(--ink); }

/* today's study */
.cards-today { margin: 1rem 0 1.5rem; }
.cards-today .today-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .75rem; margin: .5rem 0 1rem; }
.cards-today .tile { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: .65rem .9rem; }
.cards-today .tile strong { display: block; font-size: 1.5rem; font-family: var(--serif); line-height: 1.2; }
.cards-today .tile span { color: var(--ink-3); font-size: .8rem; }
.cards-today .tile small { display: block; color: var(--ink-3); font-size: .75rem; margin-top: .15rem; }
.rating-bar { display: flex; height: .9rem; border-radius: 6px; overflow: hidden; background: var(--bg-soft); margin: .35rem 0 .3rem; }
.rating-bar > span { display: block; height: 100%; }
.rating-bar .r1 { background: var(--red); } .rating-bar .r2 { background: var(--amber); } .rating-bar .r3 { background: var(--green); } .rating-bar .r4 { background: #1e63c4; }
.rating-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); }
.rating-legend i { display: inline-block; width: .65rem; height: .65rem; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.today-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem 1.5rem; margin-top: 1rem; }
.today-split h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 0 0 .25rem; }
.today-split .cards-table { margin: 0; }
.today-split .cards-table td.num, .today-split .cards-table th.num { text-align: right; width: 3.6rem; font-variant-numeric: tabular-nums; }
.today-split .cards-table td:first-child { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Keep dense planner/history tables usable on a phone. */
.cards-table-scroll { overflow-x: auto; max-width: 100%; }
.cards-table-scroll table { min-width: 620px; }
.cards-start > .btn { margin: .5rem 0 1rem; }
details.card > summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
details.card[open] > summary { margin-bottom: 1rem; }
.cards-table tr.selected { background: rgba(75, 192, 199, .12); }

/* Review is a viewport-sized workspace; only the card and expanded tools scroll. */
body:has(.review-screen) { overflow: hidden; overscroll-behavior: none; }
.review-screen { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
    gap: .4rem; padding: .6rem max(.6rem, env(safe-area-inset-right)) max(.6rem, env(safe-area-inset-bottom)) max(.6rem, env(safe-area-inset-left));
    background: var(--bg); height: 100dvh; box-sizing: border-box; overflow: hidden; }
.review-screen .page-hero { padding: 0; margin: 0; flex: none; }
.review-screen .eyebrow { margin: 0; font-size: .75rem; }
.review-screen .cards-nav { margin: 0; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }
.review-screen .cards-nav a { padding: .3rem .65rem; }
.review-plan { flex: none; max-height: 20dvh; overflow: auto; font-size: .8rem; }
.review-plan p { margin: .3rem 0; }
.review-tools { flex: none; max-height: 30dvh; overflow: auto; }
.review-screen .review-bar { margin: 0; gap: .35rem .6rem; }
.review-zoom { display: flex; align-items: center; gap: .4rem; flex: none; }
.review-zoom a { margin-left: auto; }
.review-screen .review-card { flex: 1 1 0; min-height: 0; max-height: none !important; width: 100%; max-width: none;
    margin: 0; padding: .5rem; overflow: auto; box-sizing: border-box; overscroll-behavior: contain; overflow-anchor: none; }
.review-screen .review-answer { flex: none; position: static; width: 100%; max-width: none; margin: 0;
    padding: .3rem 0; background: var(--bg); }
.review-screen .review-answer .rate { flex: 1; min-width: 0; max-width: 10rem; padding: .45rem .25rem; }
.review-screen .review-info { flex: none; width: 100%; max-width: none; margin: 0; max-height: 25dvh; overflow: auto; font-size: .8rem; }
.review-screen .review-info p { margin: .4rem 0; }
@media (max-width: 600px) {
    .review-screen .eyebrow { display: none; }
    .review-screen .review-bar .spacer { display: none; }
    .review-screen .review-bar .btn, .review-screen .flag-select { font-size: .75rem; padding: .25rem .4rem; }
    .review-screen .review-zoom .muted { display: none; }
    .review-screen .review-answer kbd { display: none; }
}

.review-screen { touch-action: pan-x pan-y; }

/* Cards are authored for a white page (AnKing styles assume it); keep them white in the site's dark theme too. */
.review-card, .browse-detail .card-face { background: #fff; color: #1c2530; color-scheme: light; }

/* Web links found on the card, repeated as normal page links (sandboxed-frame links are unreliable on phones). */
.card-links { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: center; padding: .5rem .25rem 0; font-size: .95rem; }
.card-links[hidden] { display: none; }
.card-links-label { color: #5b6573; }
.card-links a { padding: .3rem .1rem; color: #0f6f7a; }

.card-surface { position: relative; }
.card-image-layer { position: absolute; inset: 0; pointer-events: none; }
.card-inline-image { position: absolute; pointer-events: auto; display: block; overflow: auto; padding: 0; margin: 0; border: 0; border-radius: 0; background: white; color: #1c2530; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.card-inline-image[hidden] { display: none; }
.card-inline-image img { display: block; max-width: none; max-height: none; margin: 0 auto; }

.card-ai-panel { position: fixed; z-index: 1000; inset: auto .75rem max(.75rem, env(safe-area-inset-bottom)) auto; width: min(32rem, calc(100vw - 1.5rem)); max-height: 80dvh; overflow-y: auto; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); color: var(--ink); box-shadow: var(--shadow); }
.card-ai-panel > .row:first-child { justify-content: space-between; }
.card-ai-messages { max-height: 42dvh; overflow-y: auto; overflow-wrap: anywhere; }
.card-ai-message { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.card-ai-user-text { white-space: pre-wrap; }
.card-ai-markdown { white-space: normal; font-size: inherit; line-height: 1.5; }
.card-ai-markdown > :first-child { margin-top: .35rem; }
.card-ai-markdown > :last-child { margin-bottom: 0; }
.card-ai-markdown p { margin: .6rem 0; }
.card-ai-markdown ul, .card-ai-markdown ol { padding-left: 1.5rem; margin: .6rem 0; }
.card-ai-markdown li + li { margin-top: .3rem; }
.card-ai-markdown :is(h1, h2, h3, h4, h5, h6) { font-size: 1.05em; margin: .8rem 0 .35rem; }
.card-ai-markdown pre { white-space: pre; max-width: 100%; }
.card-ai-markdown table { display: block; max-width: 100%; overflow-x: auto; }
.card-ai-message.user { color: var(--teal); }
.card-ai-panel textarea { width: 100%; box-sizing: border-box; }
.card-ai-panel form { margin-top: .75rem; }
.card-ai-panel form .row { margin-top: .5rem; }