:root{color-scheme:dark;--forest:#09251f;--felt:#146b50;--felt-deep:#0d503d;--cream:#fff5dc;--gold:#f5c75b;--line:rgba(255,245,220,.16);--muted:rgba(255,245,220,.68)}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100vh;color:var(--cream);background:radial-gradient(ellipse at 50% -10%,#1d5140 0,transparent 42rem),var(--forest);font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
button,input,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.game-header{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--line);background:rgba(4,21,18,.58)}
.game-brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--cream);font-weight:850}
.game-brand img{width:38px;height:38px;border-radius:12px}
.header-status{display:flex;gap:9px;align-items:center;font-size:.88rem;color:var(--muted)}
.connection-dot{width:8px;height:8px;border-radius:50%;background:#53d68b;box-shadow:0 0 10px #53d68b}
.game-shell{width:min(1600px,calc(100% - 48px));margin:0 auto;padding:28px 0 38px}
.auth-screen{min-height:calc(100vh - 134px);display:grid;place-items:center}
.auth-card{width:min(520px,100%);padding:42px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));box-shadow:0 24px 70px rgba(0,0,0,.22)}
.eyebrow{margin:0 0 10px;color:var(--gold);font-size:.7rem;font-weight:850;letter-spacing:.18em}
.auth-card h1,.table-toolbar h1{margin:0;font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.05em}
.auth-copy,.auth-card>p:not(.eyebrow){color:var(--muted);line-height:1.65}
.field-label{display:block;margin:24px 0 8px;font-size:.85rem;font-weight:750}
.inline-field{display:flex;gap:8px}
.inline-field input{min-width:0;flex:1;padding:13px;border:1px solid var(--line);border-radius:12px;color:var(--cream);background:rgba(0,0,0,.18)}
.button,.small-button{border:1px solid var(--line);border-radius:12px;color:var(--cream);background:rgba(255,255,255,.07);font-weight:800;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease}
.button{min-height:48px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.button:hover,.small-button:hover{transform:translateY(-1px);border-color:var(--gold)}
.button-primary{border-color:transparent;color:#19372c;background:var(--gold)}
.button-primary:hover{background:#ffda78}
.button-quiet:hover,.small-button:hover{background:rgba(255,255,255,.12)}
.wide-button{width:100%;margin-top:12px}
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:rgba(255,245,220,.4);font-size:.78rem}
.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:var(--line)}
.auth-notice{min-height:42px;font-size:.8rem!important}
.back-link{display:inline-block;margin-top:16px;color:var(--gold);font-size:.86rem;text-decoration:none}
.table-toolbar{display:flex;align-items:end;justify-content:space-between;gap:20px}
.table-toolbar h1{font-size:2.2rem}
.table-controls{display:flex;align-items:center;gap:14px}
.table-controls label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.84rem}
.table-controls select{padding:10px 32px 10px 12px;border:1px solid var(--line);border-radius:10px;color:var(--cream);background:#123a30}
.wallet-line{display:flex;justify-content:space-between;gap:16px;margin:18px 0;padding:11px 15px;border:1px solid var(--line);border-radius:12px;color:var(--muted);background:rgba(255,255,255,.035);font-size:.84rem}
.player{position:absolute;z-index:2;text-align:center;min-width:190px}
.trick-meta{margin-bottom:10px;color:rgba(255,245,220,.65);font-size:.75rem}
.table-message{min-height:22px;color:rgba(255,245,220,.78);font-size:.85rem}
.card{position:relative;width:clamp(64px,6.2vw,91px);height:clamp(92px,9vw,132px);border:1px solid #e8e2d7;border-radius:10px;color:#19231f;background:linear-gradient(145deg,#fff,#f0eee8);box-shadow:0 6px 15px rgba(0,0,0,.28);font-family:Georgia,"Times New Roman",serif;user-select:none}
.card.red{color:#c52f3d}
.card-corner.bottom{left:auto;top:auto;right:7px;bottom:5px;transform:rotate(180deg)}
.human-card.selected{z-index:4;transform:translateY(-22px);box-shadow:0 0 0 3px var(--gold),0 9px 22px rgba(0,0,0,.4)}
.human-card.illegal{filter:grayscale(.6);opacity:.55}
.action-row{display:flex;justify-content:center;gap:8px;padding:9px 0 13px}
.small-button{padding:9px 13px;font-size:.78rem}
.small-button:disabled{opacity:.42;cursor:not-allowed}
.active-turn .player-name{color:var(--gold)}
.result-dialog{max-width:min(520px,calc(100% - 24px));padding:0;border:1px solid var(--line);border-radius:22px;color:var(--cream);background:#10372c;box-shadow:0 28px 100px rgba(0,0,0,.55)}
.result-dialog::backdrop{background:rgba(0,0,0,.63);backdrop-filter:blur(4px)}
.dialog-content{position:relative;padding:34px;min-width:min(460px,calc(100vw - 32px))}
.dialog-content h2{margin:0 0 16px;font-size:2rem}
.dialog-content p:not(.eyebrow){color:var(--muted);line-height:1.6}
.dialog-close{position:absolute;right:14px;top:12px;border:0;color:var(--cream);background:none;font-size:1.7rem;cursor:pointer}
.result-scores{display:grid;gap:8px;margin:18px 0}
.score-row{display:flex;justify-content:space-between;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.04)}
.score-row.me{border-color:rgba(245,199,91,.65);color:var(--gold)}
.recovery-code{display:block;margin:18px 0;padding:14px;border-radius:10px;color:var(--gold);background:rgba(0,0,0,.25);font-size:1.1rem;letter-spacing:.1em;text-align:center}
.mobile-screen{min-height:calc(100vh - 68px);display:grid;place-items:center;padding:24px}
.mobile-card{text-align:center}
.mobile-card>img{border-radius:20px;margin-bottom:20px}
.mobile-actions{display:grid;gap:10px;margin-top:22px}
.mobile-actions .button{width:100%}[hidden]{display:none!important}
@media(max-width:900px){.game-shell{width:calc(100% - 24px);padding-top:18px}
.player{min-width:130px}
.card{width:64px;height:92px}}
@media(max-width:620px){.game-header{padding:0 14px}
.header-status{font-size:.72rem}
.game-brand span{display:none}
.game-shell{width:calc(100% - 20px);padding:14px 0}
.table-toolbar{align-items:start;flex-direction:column}
.table-toolbar h1{font-size:1.75rem}
.table-controls{width:100%;justify-content:space-between}
.wallet-line{flex-wrap:wrap;font-size:.73rem}
.player{min-width:96px}
.table-message{font-size:.68rem}
.card{width:52px;height:76px;border-radius:7px}
.card-corner.bottom{left:auto;top:auto;right:5px;bottom:4px}
.action-row{padding-top:4px}
.small-button{padding:8px;font-size:.68rem}
.auth-card{padding:28px 22px}
.inline-field{flex-direction:column}
.dialog-content{padding:28px 22px}
.dialog-content h2{font-size:1.55rem}}
.played-card{display:grid;justify-items:center;gap:4px}
.played-card .card{width:clamp(48px,4.8vw,70px);height:clamp(70px,7vw,100px)}
.played-card .card-corner{font-size:.83rem}
.trick-seat{color:rgba(255,245,220,.68);font-size:.68rem;font-weight:700}
.dashboard-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:8px 0 24px}
.dashboard-heading h1{margin:0;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.06em}
.dashboard-heading p:not(.eyebrow){color:var(--muted)}
.dashboard-tools,.dashboard-actions{display:flex;flex-wrap:wrap;gap:10px}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
.stat-card,.dashboard-panel{padding:22px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.045)}
.stat-card span,.stat-card small{display:block;color:var(--muted)}
.stat-card strong{display:block;margin:8px 0;font-size:2rem}
.dashboard-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dashboard-panel h2{margin:0 0 8px}
.dashboard-panel>p:not(.eyebrow){color:var(--muted);line-height:1.6}
.dashboard-panel .dashboard-actions{margin-top:18px}
.dashboard-panel .button:disabled{opacity:.45;cursor:not-allowed}
.dashboard-footer{display:flex;justify-content:space-between;gap:16px;margin:18px 4px;color:var(--muted);font-size:.78rem}
.dashboard-footer a{color:var(--gold)}
.subtle{min-height:1.2em;color:var(--muted);font-size:.8rem}
/*
 The guided-lesson banner: a centred flow row above the canvas. It keeps the app's gold card look, and the
 hint button sits beside the text on one row, wrapping under it on a narrow window.
*/
.tutorial-banner{display:flex;align-items:center;gap:14px;margin:8px auto 6px;padding:11px 16px;border:1px solid rgba(245,199,91,.35);border-radius:14px;background:rgba(245,199,91,.08);max-width:min(78%,900px);flex:0 0 auto}
.tutorial-banner strong{color:var(--gold);white-space:nowrap}
.tutorial-banner span{flex:1;color:var(--muted);font-size:.86rem}
.score-detail{padding:5px 0 12px;border-bottom:1px solid var(--line)}
.score-detail small{display:block;color:var(--muted);margin:7px 4px}
.score-detail>p{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.score-detail>p .card{width:44px;height:62px;box-shadow:none}
.score-detail>p .card-corner{font-size:.7rem}
.score-detail>p .card-center{font-size:1.4rem}
.lesson-dialog .dialog-content{max-height:min(80vh,800px);overflow:auto}
.lesson-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px;margin:20px 0}
.lesson-choice{min-height:58px;font-size:.95rem}
.lesson-dialog h3{color:var(--gold);font-size:1rem;line-height:1.5}
.lesson-dialog #lesson-feedback{min-height:2em;color:var(--gold)}
.table-account{color:var(--gold);font-weight:800}
.human-card.selected{z-index:6}
.dialog-content .card{pointer-events:none}
@media(max-width:1100px){.dashboard-columns{grid-template-columns:1fr}}
@media(max-width:700px){.dashboard-heading{align-items:flex-start;flex-direction:column}
.stat-grid{grid-template-columns:1fr}
.dashboard-footer{flex-direction:column}
.tutorial-banner{align-items:flex-start;flex-wrap:wrap}
.tutorial-banner span{flex-basis:100%}}
.sound-option{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--cream)}
.sound-option input,.tip-disable input{accent-color:var(--gold);width:18px;height:18px}
/*
 The coach recommendation is drawn on the canvas as a speech bubble beside the player's hand (table.js
 drawCoachTip), in the same coordinate system as the cards it advises about. This element stays in the DOM
 as the screen-reader's live copy of the same sentence, because a canvas cannot be announced. It is
 visually clipped rather than removed, so assistive tech hears the advice as it appears.
*/
.coach-strip{
  position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;pointer-events:none;
}
.replay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;justify-items:center;margin:22px 0}
.replay-card{display:grid;justify-items:center;gap:8px;color:var(--muted);font-size:.78rem}
.replay-card .card{width:clamp(54px,6vw,82px);height:clamp(78px,8vw,118px)}
.header-actions{display:flex;align-items:center;gap:10px}
.language-toggle{padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--cream);background:rgba(255,255,255,.07);font-weight:800;font-size:.82rem;letter-spacing:.02em;cursor:pointer}
.language-toggle:hover{background:rgba(255,255,255,.14)}
.auth-form{display:block}
.auth-form .wide-button{margin-top:12px}
.auth-form input,.account-dialog input,.inline-field input{width:100%;min-width:0;padding:13px;border:1px solid var(--line);border-radius:12px;color:var(--cream);background:rgba(0,0,0,.18)}
.auth-form input:focus,.account-dialog input:focus,.inline-field input:focus{outline:2px solid rgba(245,199,91,.55);outline-offset:1px}
.auth-form input::placeholder,.account-dialog input::placeholder,.inline-field input::placeholder{color:rgba(255,245,220,.38)}
.field-hint{margin:8px 0 0;color:var(--muted);font-size:.76rem;line-height:1.5}
.auth-divider{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--muted);font-size:.76rem}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-notice{margin:20px 0 4px}
.auth-notice.is-error{color:#ffaaa4}
.auth-recovery{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.auth-recovery summary{cursor:pointer;color:var(--gold);font-size:.82rem;font-weight:750}
.auth-recovery summary:hover{text-decoration:underline}
.auth-recovery .inline-field{margin-top:8px}
.account-dialog .dialog-content{max-height:min(86vh,820px);overflow:auto}
.account-dialog form{margin-top:8px}
.account-dialog .wide-button{margin-top:20px}
.account-dialog p{color:var(--muted);line-height:1.6}
@media(max-width:900px){.header-actions{gap:6px}
.language-toggle{padding:6px 11px;font-size:.75rem}}
.table-screen{display:grid;grid-template-rows:1fr auto auto auto;gap:8px;height:calc(100vh - 68px - 24px);min-height:0}
/*
 The stage is a column: the guided-lesson banner is a real flow row above the canvas, so it sits above the
 north seat (Milo) instead of floating over him, and the canvas takes whatever room is left. With the
 banner hidden the canvas simply fills the stage, exactly as it did before the row existed.
*/
.table-stage{position:relative;display:flex;flex-direction:column;min-height:0;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#09251f}
#table-canvas{display:block;width:100%;flex:1 1 auto;min-height:0;touch-action:none}
.table-hud{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;pointer-events:none;font-size:.78rem;color:var(--muted)}
.table-hud{top:0}
.table-hud.hud-bottom{top:auto;bottom:0;justify-content:center;gap:16px}
.hud-chip{padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(4,21,18,.6);white-space:nowrap}
.hud-wallet{color:var(--gold);font-weight:700}
.hud-turn{color:var(--cream);font-weight:700}
.hud-message{color:var(--muted)}
.table-toolbar{display:flex;justify-content:flex-end}
.table-actions{justify-content:center;flex-wrap:wrap}
.table-actions .small-button{min-width:104px}
.card-chip{display:inline-grid;place-items:center;min-width:34px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--cream);color:#1d1d1d;font-weight:800;font-size:.82rem}
.card-chip.red{color:#c0392b}
.score-detail>p .card-chip{margin:0 2px}
@media(max-width:900px){.table-screen{height:calc(100vh - 60px - 16px)}
.table-actions .small-button{min-width:0}}
.score-cards{display:flex;flex-wrap:wrap;gap:3px;margin:8px 0 6px;min-height:22px}
.score-lines{margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
.score-line{display:flex;justify-content:space-between;gap:12px;padding:2px 0;color:var(--muted);font-size:.8rem}
.score-line strong{color:var(--cream);font-variant-numeric:tabular-nums}
.score-detail .score-row strong{font-size:1.15rem}
#result-scores,#scores-list{max-height:min(52vh,460px);overflow:auto}
.screen-reader-actions{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.screen-reader-actions:focus-within{
  position:static;width:auto;height:auto;margin:8px 0;padding:8px;overflow:visible;
  clip:auto;clip-path:none;white-space:normal;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.result-table{display:flex;flex-direction:column;gap:0}
.result-row{
  display:grid;grid-template-columns:minmax(72px,1fr) minmax(0,2.6fr) auto;
  align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line);
}
.result-row:last-child{border-bottom:0}
.result-row.me{background:rgba(245,199,91,.07)}
.result-head{
  color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;
  border-bottom:1px solid var(--line);
}
.result-name{font-weight:700;color:var(--cream)}
.result-cards{display:flex;flex-wrap:wrap;gap:3px;min-height:20px;align-items:center}
.result-total{font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--cream)}
.result-none{color:var(--muted)}
.score-group{margin:8px 0}
.score-group-label{display:block;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;margin-bottom:3px}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.lesson-diagram{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center;
  margin:14px 0;padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(6,26,22,.5);
}
.lesson-diagram-step{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.lesson-diagram-label{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.lesson-arrow{color:var(--muted);font-size:1.1rem}
.lesson-card{
  display:inline-flex;align-items:center;justify-content:center;min-width:30px;padding:5px 8px;
  border:1px solid var(--line);border-radius:7px;background:var(--card-face,#f8f4e8);
  color:#1b1b1b;font-weight:800;font-size:.95rem;
}
.lesson-academy-subtitle{color:var(--muted);font-size:.85rem;margin-top:-4px}
.lesson-table-description{font-size:.82rem}
.lesson-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.lesson-list-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:rgba(6,26,22,.45);color:var(--cream);font:inherit;font-size:.92rem;font-weight:700;
  text-align:left;cursor:pointer;
}
.lesson-list-item:hover{border-color:var(--gold);background:rgba(245,199,91,.1)}
.lesson-list-item.done{border-color:rgba(89,130,112,.7);background:rgba(89,130,112,.16)}
.lesson-list-item.done .lesson-list-mark{color:#9fd3b8}
.lesson-list-item.locked{opacity:.62}
.lesson-list-mark{font-weight:800;font-size:.82rem;color:var(--gold);white-space:nowrap}
.lesson-back{margin-bottom:8px}
.lesson-locked-note{
  margin:10px 0 0;padding:10px 12px;border:1px solid rgba(224,138,60,.5);border-radius:10px;
  background:rgba(224,138,60,.12);color:#f0c9a0;font-size:.84rem;
}
.lesson-choices .lesson-choice.chosen{
  border-color:var(--gold);background:rgba(245,199,91,.16);color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(245,199,91,.55);
}
.lesson-choices .lesson-choice.chosen::after{content:" ✓";font-weight:800;color:var(--gold)}
.lesson-choices .lesson-choice.rejected{border-color:#d9705f;background:rgba(217,112,95,.16)}
.lesson-choices .lesson-choice.rejected::after{content:" ✕";font-weight:800;color:#e79b8e}
#lesson-feedback.error{color:#e79b8e}
#lesson-feedback.reward{color:#9fd3b8}
#lesson-feedback.locked{color:#f0c9a0}
.lesson-hero{display:flex;justify-content:center;margin:16px 0 4px}
.lesson-hero-card{
  position:relative;width:118px;aspect-ratio:5 / 7;border-radius:10px;
  background:#f8f4e8;border:1px solid rgba(0,0,0,.28);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
}
.lesson-hero-corner{
  position:absolute;display:grid;place-items:center;line-height:1;
  font-weight:800;font-family:Inter,'PingFang SC','Microsoft YaHei',sans-serif;
}
.lesson-hero-corner b{font-size:1.05rem}
.lesson-hero-corner i{font-size:.8rem;font-style:normal}
.lesson-hero-corner.tl{top:6px;left:7px}
.lesson-hero-corner.br{bottom:6px;right:7px}
.lesson-hero-card.red{color:#c0392b}
.lesson-hero-card.black{color:#1b1b1b}
.lesson-hero-art{
  width:78%;height:auto;max-height:78%;object-fit:contain;
  
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));
}


/* ------------------------------------------------------------------------------------------------
   Play page footer. The practice note and the store link sit below the table so they never compete with
   play, and the note is left-aligned as the quietest place on the page.
   ------------------------------------------------------------------------------------------------ */
.play-footer{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  width:min(1600px,calc(100% - 48px));margin:0 auto;padding:20px 4px 34px;
  border-top:1px solid var(--line);color:var(--muted);font-size:.82rem;
}
.play-footer-note{max-width:min(680px,70%);line-height:1.6}
.store-link{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  border:1px solid var(--line);border-radius:12px;color:var(--cream);
  background:rgba(255,255,255,.07);font-weight:800;font-size:.8rem;text-decoration:none;
}
.store-link:hover{border-color:var(--gold);background:rgba(245,199,91,.12)}
.launch-store{margin-top:14px;text-decoration:none}
@media(max-width:700px){
  .play-footer{width:calc(100% - 24px);flex-direction:column;align-items:flex-start;gap:14px}
  .play-footer-note{max-width:100%}
}

/* ------------------------------------------------------------------------------------------------
   Suit marks are drawn as shapes instead of the ♠ ♥ ♦ ♣ characters. Those characters resolve to whatever
   font the platform chooses, and at lesson-list sizes the clubs and spades came out as two similar dark
   blobs. A shape is unmistakable and identical on every platform.
   ------------------------------------------------------------------------------------------------ */
/*
 The suit mark is the suit character, in the same font the table draws it with. Drawing it any other way made
 the lesson screens disagree with the cards on the table, and the two must look like the same deck.

 It is set slightly larger than the rank so the four suits stay distinguishable at the small size a lesson
 option uses, where clubs and spades otherwise blur together.
*/
.suit-glyph{
  font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:1.15em;line-height:1;font-weight:800;
  display:inline-block;flex:0 0 auto;
}
.card-label{display:inline-flex;align-items:center;gap:.14em;font-weight:800;font-variant-numeric:tabular-nums}
.card-label.red{color:#c0392b}
.card-label.black{color:#1b1b1b}
/*
 A card label does not resize the icon. It used to shrink it, and once the base size was raised that
 override still won on specificity: every lesson label kept drawing its suit at the old small size.
*/
.card-chip .card-label{font-size:.94em}
.lesson-card .card-label{font-size:1rem}
/* Dialog chips draw a dark card face, so the label keeps its own ink colour on the light chip. */
.card-chip{color:#1b1b1b}
.card-chip.red .card-label.red{color:#c0392b}