/* The chapter tabs share the native app's quiet, persistent navigation. */
[hidden]{display:none!important}
.main-navigation{display:flex;border-bottom:1px solid var(--ms-cell-line);margin:20px 0 28px;position:sticky;top:0;background:var(--ms-bg);z-index:5}
.main-navigation .tab{flex:1;min-height:48px;padding:10px 4px;font:400 var(--ms-size-body)/1.3 var(--ms-font-display);letter-spacing:0;text-transform:none;border:0;border-bottom:2px solid transparent;background:none;color:var(--ms-text-3)}
.main-navigation .tab.active{color:var(--ms-text-bright);border-bottom-color:var(--ms-text-bright)}
.main-navigation .tab:focus-visible{outline:2px solid var(--ms-text-bright);outline-offset:-4px}
/* Home (W2). The quantity is the page's one large thing: "0 of 10 levels" at the h2 step,
   over its ten squares of paper. Section titles are sentences in Shippori Mincho at the title
   step on the shared hairline; a fact that qualifies the quantity, or names a control, is a
   quiet line at the small step. No eyebrows. */
.home-headline{font:400 var(--ms-size-h2)/1.3 var(--ms-font-display);margin:0 0 var(--ms-space-2);color:var(--ms-text-bright);text-wrap:balance}
.home-title{font:400 var(--ms-size-title)/1.3 var(--ms-font-display);margin:0;padding-bottom:var(--ms-space-3);border-bottom:var(--ms-rule);color:var(--ms-text-bright);text-wrap:balance}
.home-quiet{display:block;font:400 var(--ms-size-small)/1.5 var(--ms-font-display);margin:0;color:var(--ms-text-2)}
.home-instructions{font:400 var(--ms-size-body)/1.7 var(--ms-font-display);margin:var(--ms-space-6) 0;color:var(--ms-text-2)}
.home-meter{display:flex;justify-content:space-between;gap:var(--ms-space-1);margin:var(--ms-space-6) 0 var(--ms-space-4)}
.home-meter .home-level{width:24px;height:24px;background:var(--ms-paper);border:0;position:relative}
.home-level.current{outline:1px solid var(--ms-text-3);outline-offset:2px}
.home-play{width:100%;margin:var(--ms-space-2) 0 var(--ms-space-6)}
/* The week: seven columns of a day letter, a square of paper and the date, in the body face at
   the small step; the cleared count and the dates align as numerals. */
.home-week{margin-top:var(--ms-space-4)}.home-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:22px 0}
.home-day{appearance:none;background:none;border:0;padding:0;display:flex;align-items:center;flex-direction:column;gap:var(--ms-space-3);color:var(--ms-text);font:400 var(--ms-size-small) var(--ms-font-display);font-variant-numeric:tabular-nums;min-height:80px;cursor:pointer}
.home-day:disabled{opacity:.4;cursor:default}.home-day-square{display:grid;place-items:center;width:24px;height:24px;background:var(--ms-paper)}
.home-day.today .home-day-square{outline:1px solid var(--ms-text-3);outline-offset:2px}
.home-note{font:400 var(--ms-size-body)/1.6 var(--ms-font-display);color:var(--ms-text-2);margin:var(--ms-space-3) 0 var(--ms-space-6)}
.home-learning-row{display:block;width:100%;min-height:52px;padding:14px 0;text-align:left;background:none;border:0;border-bottom:var(--ms-rule);font:400 16px var(--ms-font-display);color:var(--ms-text);cursor:pointer}
.home-learning-row:disabled{opacity:.4;cursor:default}
@media (hover:hover){.home-day:not(:disabled):hover,.home-learning-row:not(:disabled):hover{color:var(--ms-text-bright)}}
.home-play:focus-visible,.home-day:focus-visible,.home-learning-row:focus-visible,#customSize:focus-visible{outline:var(--ms-focus-width) solid var(--ms-text);outline-offset:var(--ms-focus-offset)}
#customSize{display:block;width:100%;padding:14px;margin:var(--ms-space-3) 0 var(--ms-space-4);background:var(--ms-card);color:var(--ms-text-bright);border:var(--ms-rule);font:400 var(--ms-size-input) var(--ms-font-display)}
#customSize option{background:var(--ms-card);color:var(--ms-text-bright)}
/* The way home: a drawn chevron and the destination, as a quiet button flush with the column.
   Its hit area rises half a step into the space above, so the status and the sheet stay put. */
#gameBack{display:flex;align-items:center;gap:var(--ms-space-2);width:fit-content;margin:calc(var(--ms-space-3) / -2) 0 var(--ms-space-4);padding-inline:0}
#gameBack .back-chevron{flex:none}
#howToPlay{margin-bottom:28px}#howToPlay>summary{display:none}

/* The Milestones dialog (STANDINGS_WORK_ORDER §4.3): the four milestones from the visitor's own
   progress. Closes from the ×, Escape and the backdrop; the same shell the Settings panel uses.
   The summary is a sentence; each row is a title and its sentence beside the mark, and the count
   or the day it was earned is a quantity in Shippori Mincho with aligned numerals. */
.home-milestones-dialog{box-sizing:border-box;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow:auto;margin:auto;padding:24px;background:var(--ms-bg);color:var(--ms-text);border:var(--ms-rule)}
.home-milestones-dialog::backdrop{background:var(--ms-scrim-soft)}
.home-milestones-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:-8px 0 8px}
.home-milestones-head .home-headline{margin:12px 0 0}
.home-milestones-close{appearance:none;border:0;background:transparent;color:var(--ms-text);font:400 24px/1 var(--ms-font-ui);cursor:pointer;min-width:46px;min-height:46px;margin-right:-12px}
.home-milestones-close:focus-visible{outline:2px solid var(--ms-text);outline-offset:-4px}
.home-milestones-summary{font:400 var(--ms-size-body)/1.65 var(--ms-font-display);font-variant-numeric:tabular-nums;margin:0 0 var(--ms-space-3);padding-bottom:var(--ms-space-3);border-bottom:var(--ms-rule);color:var(--ms-text)}
.home-milestone{margin:0;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:var(--ms-space-4);align-items:start;padding:var(--ms-space-5) 0;border-bottom:1px solid var(--ms-text-faint)}
.home-milestone-mark{width:24px;height:24px;background:var(--ms-paper);position:relative;margin-top:2px;box-shadow:inset 0 0 0 1px var(--ms-cell-line)}
.home-milestone.earned .home-milestone-mark{box-shadow:none}
.home-milestone h3{text-transform:none;letter-spacing:0;border:0;padding:0;font:400 var(--ms-size-title)/1.3 var(--ms-font-display);color:var(--ms-text-2);margin:0 0 var(--ms-space-1)}
.home-milestone.earned h3{color:var(--ms-text-bright)}
.home-milestone .home-note{margin:0}
.home-milestone-status{margin:var(--ms-space-1) 0 0;font:400 var(--ms-size-small)/1.5 var(--ms-font-display);font-variant-numeric:tabular-nums;color:var(--ms-text-3);white-space:nowrap}
.home-milestones-note{margin:20px 0 0}
@media(max-width:360px){.home-milestones-dialog{padding:20px}.home-milestone{gap:12px}}

/* Kasure's approved verdigris layout. The daily sheet is the single paper surface;
   navigation and the weekly calendar remain directly on the teal ground. */
[data-theme="kasure"] body::before{content:"";position:fixed;inset:0;pointer-events:none;background:url("/releases/6a657ff1f9b234073b4a9aee/assets/kasure-paper-grain.jpg") center/512px;opacity:.45;mix-blend-mode:multiply;z-index:0}
[data-theme="kasure"] .home-daily-card{position:relative;padding:28px 16px;margin:0 -16px;background:var(--ms-card)}
[data-theme="kasure"] .home-daily-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:url("/releases/6a657ff1f9b234073b4a9aee/assets/kasure-paper-grain.jpg") center/512px;opacity:.45;mix-blend-mode:multiply}
[data-theme="kasure"] .home-daily-card .home-play{margin-bottom:0}
[data-theme="kasure"] .home-week{margin-top:28px}
[data-theme="kasure"] #achievementsBtn{color:var(--ms-ornament-plum)}

[data-theme="kasure"] .wrap{position:relative}
[data-theme="kasure"] .home-level:not(.on){box-shadow:inset 0 0 0 1px var(--ms-cell-line)}
[data-theme="kasure"] .home-day-square{color:var(--ms-tile-3)}

[data-theme="kasure"] .counter{font-weight:400;color:var(--ms-text-3)}

[data-theme="kasure"] .theme-option.is-selected{box-shadow:inset 2px 0 0 var(--ms-text)}

/* Keep the approved logo lockup clear of all three controls on narrow phones. */
@media(max-width:380px){
  .wrap{padding-inline:20px}
  header{gap:8px}
  .brand{gap:8px}
  .brand .mark{width:28px;height:28px}
  .wordmark{font-size:20px;letter-spacing:1.5px}
}

[data-theme="kasure"] .main-navigation{isolation:isolate}
[data-theme="kasure"] .main-navigation::before{content:"";position:absolute;inset:0;background:url("/releases/6a657ff1f9b234073b4a9aee/assets/kasure-paper-grain.jpg") center/512px;opacity:.45;mix-blend-mode:multiply;pointer-events:none;z-index:-1}