/* yumizu 学習トップ（study-flow）：①過去問 ②動画・本 ③重要単語 ④模擬試験 の4タブ。
   形はキャンバスのモック（学習トップ：①〜④をタブで切り替え）に合わせる。
   基本のトークンは yz-base.css と共通。4ステップの色はここで定義する。 */
body.yz-home{
 --dock-h:0px;--bar-h:44px;
 /* Tokens the shared study modules (portal/membership/ai) read. */
 --body-color:var(--ink);--link-color:var(--blue);--dark-border:var(--line);--main-bg:var(--paper);--main-bg-sub:var(--paper-2);
 --color-666:var(--ink-3);--color-ccc:var(--line-2);--color-ddd:var(--line);--color-eee:var(--paper-2);--input-border:var(--line-2);--input-bg:var(--paper);
 --cta-color:var(--blue);--brand-dark:var(--blue-deep);--brand-pale:var(--paper-2);--h3-bg:transparent;
 /* Step colours: fill, text on fill, soft background, readable text */
 --s1:#006ff2;--s1-on:#ffffff;--s1-soft:#dbebfd;--s1-ink:#005fce;
 --s2:#ff7070;--s2-on:#5e1414;--s2-soft:#ffebeb;--s2-ink:#b22a2a;
 --s3:#ffbf2e;--s3-on:#6b4a00;--s3-soft:#fff6e2;--s3-ink:#8f6300;
 --s4:#20c07a;--s4-on:#0c462c;--s4-soft:#e0f6ec;--s4-ink:#14764b;
 --round:"Zen Maru Gothic","BIZ UDPGothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
 --card-shadow:0 1px 2px rgba(31,45,66,.06);
 --rail-h:110px;
 background:var(--mist);
}
:root:not([data-theme="night"]):not([data-theme="sepia"]) body.yz-home{--mist:#f4f7fb}
:root[data-theme="night"] body.yz-home{
 --s1-soft:#13294a;--s1-ink:#7fb6ff;--s2-soft:#3d1c1c;--s2-ink:#ff9d9d;
 --s3-soft:#3a3013;--s3-ink:#ffd36b;--s4-soft:#123526;--s4-ink:#6fe0ab;
 --card-shadow:0 0 0 1px var(--line);
}
:root[data-theme="sepia"] body.yz-home{--s1-soft:#e4ecf6;--s2-soft:#f7e6e3;--s3-soft:#f7eed6;--s4-soft:#e3efe6}
.yz-home a{color:var(--blue)}
.yz-home [data-step="1"],.yz-home [data-to="1"]{--c:var(--s1);--c-on:var(--s1-on);--c-soft:var(--s1-soft);--c-ink:var(--s1-ink)}
.yz-home [data-step="2"],.yz-home [data-to="2"]{--c:var(--s2);--c-on:var(--s2-on);--c-soft:var(--s2-soft);--c-ink:var(--s2-ink)}
.yz-home [data-step="3"],.yz-home [data-to="3"]{--c:var(--s3);--c-on:var(--s3-on);--c-soft:var(--s3-soft);--c-ink:var(--s3-ink)}
.yz-home [data-step="4"],.yz-home [data-to="4"]{--c:var(--s4);--c-on:var(--s4-on);--c-soft:var(--s4-soft);--c-ink:var(--s4-ink)}

/* Header */
.yz-home .yz-bar-in{max-width:1240px;padding:0 18px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px}
.yz-logo{display:inline-flex;align-items:center;gap:7px;margin-right:0;justify-self:start;text-decoration:none;color:var(--blue);line-height:1;white-space:nowrap}
.yz-logo b{font-family:var(--round);font-size:20px;font-weight:800;letter-spacing:.02em}
.yz-logo i{width:6px;height:6px;border-radius:50%;background:var(--aqua);align-self:flex-end;margin-bottom:5px}
.yz-logo small{font:700 13px/1 var(--jp);color:var(--blue);background:var(--blue-soft);padding:5px 12px;border-radius:999px;margin-left:10px;letter-spacing:0;align-self:center}
.yz-bar-link{font-size:13px;color:var(--ink-2)!important;text-decoration:none;padding:8px 10px;border-radius:10px}
.yz-bar-link:hover{background:var(--paper-2)}

.yz-home-main{max-width:1240px;margin:0 auto;padding:0 0 48px}

/* Hero */
.yz-course{flex:none;font:700 clamp(18px,4vw,22px)/1.4 var(--round);color:#813f28;margin:0;justify-self:center;padding:5px 11px;border-radius:9px;background:transparent;white-space:nowrap}
:root[data-theme="night"] .yz-course{color:#ffd8c2;background:transparent}
.yz-home .yz-bar-in>#yzTheme{justify-self:end}
.yz-home .yz-resume-top{min-height:44px;padding:9px 13px;border:1px solid var(--line-2);border-radius:12px;background:var(--paper-2);color:var(--ink);font:700 13px/1.5 var(--jp);cursor:pointer;margin:4px 0 0}
.yz-home .yz-resume-top:disabled{opacity:.45;cursor:default}
.yz-home #flowPast>.yz-pane-head>div{flex:none}
@media(max-width:559px){.yz-home .yz-bar-in{padding:0 10px;grid-template-columns:minmax(max-content,1fr) auto minmax(44px,1fr);gap:6px}.yz-course{padding:5px 8px}.yz-logo b{font-size:clamp(13px,4vw,17px);white-space:nowrap}.yz-logo{gap:4px}.yz-course{font-size:clamp(16px,4.8vw,19px)}.yz-home .yz-resume-top{font-size:12px;padding:8px 10px}.yz-home #flowPast>.yz-pane-head{gap:10px}.yz-home #flowPast>.yz-pane-head>div{flex:none}}
.yz-hero{padding:4px 16px 0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 32px}
.yz-hero h1{margin:0 auto 0 0;font:700 clamp(16px,5.8vw,34px)/1.35 var(--round);color:var(--ink);white-space:nowrap;text-wrap:nowrap}
.yz-hero h1 span{display:block;font:700 13px/1.5 var(--jp);letter-spacing:.04em;color:var(--blue);margin-bottom:4px}
.yz-hero-lead{flex:0 1 100%;width:100%;margin:0;font-size:clamp(8px,calc((100vw - 32px) / 34),12px);color:var(--ink-2);line-height:1.45;max-width:36em;text-wrap:balance}

/* ───────── Tabs ───────── */
.yz-home .study-flow{font-family:var(--jp);color:var(--ink);font-size:15px;line-height:1.8;padding:0 0 10px}
.yz-home .study-flow [hidden],.yz-home [data-yz-hidden]{display:none!important}
.yz-railwrap{position:sticky;top:var(--bar-h);z-index:25;padding:14px 12px 16px;background:var(--mist)}
.yz-tabs{--i:0;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:6px;border-radius:22px;background:var(--paper);box-shadow:0 1px 2px rgba(31,45,66,.06),0 10px 26px -14px rgba(31,45,66,.22)}
:root[data-theme="night"] .yz-tabs{box-shadow:0 0 0 1px var(--line)}
.yz-tabs[data-i="1"]{--i:1}.yz-tabs[data-i="2"]{--i:2}.yz-tabs[data-i="3"]{--i:3}
.yz-tabs[data-i="0"]{--pk:var(--s1);--pk-soft:var(--s1-soft)}
.yz-tabs[data-i="1"]{--pk:var(--s2);--pk-soft:var(--s2-soft)}
.yz-tabs[data-i="2"]{--pk:var(--s3);--pk-soft:var(--s3-soft)}
.yz-tabs[data-i="3"]{--pk:var(--s4);--pk-soft:var(--s4-soft)}
.yz-puck{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/4);border-radius:17px;background:var(--pk-soft);box-shadow:inset 0 0 0 2px var(--pk);transform:translateX(calc(var(--i)*100%));transition:transform .55s cubic-bezier(.22,.8,.24,1),background-color .4s,box-shadow .4s}
.yz-home .yz-tab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:76px;padding:8px 2px;border:0;border-radius:17px;background:none;color:#3a4a5f;font:700 12px/1.35 var(--round);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .3s}
:root[data-theme="night"] .yz-home .yz-tab{color:var(--ink-2)}
.yz-home .yz-tab:hover{background:none}
.yz-tab-n{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c);color:var(--c-on);font:600 14px/1 var(--num)}
.yz-tab-t{display:flex;flex-direction:column;min-width:0}
.yz-tab-short,.yz-tab small{display:none}
.yz-tab b{font-weight:700}
.yz-ph{display:inline-block;font-style:normal}
.yz-tab[aria-selected="true"]{color:var(--c-ink)!important}
.yz-tab:focus-visible{outline-offset:-3px}

/* ───────── Sliding panes ───────── */
.yz-stage{overflow:hidden;overflow:clip}
.yz-track{--i:0;display:flex;align-items:flex-start;width:400%;transform:translateX(calc(var(--i)*-25%));transition:transform .55s cubic-bezier(.22,.8,.24,1)}
.yz-pane{flex:0 0 25%;min-width:0;padding:2px 12px 6px;transition:opacity .45s}
.yz-pane[inert]{opacity:.3}
.yz-pane.is-away{height:0;overflow:hidden;padding-top:0;padding-bottom:0}
.yz-track:not([data-ready]) .yz-pane:not(:first-child){height:0;overflow:hidden;padding-top:0;padding-bottom:0}
.yz-notrans .yz-track,.yz-notrans .yz-puck,.yz-notrans .yz-pane,.yz-notrans .yz-tab{transition:none!important}
.yz-pane-grid{display:grid;gap:14px;align-items:start}
.yz-pane-main,.yz-pane-side{display:grid;gap:12px;min-width:0;align-content:start}
.yz-learn{display:grid;gap:12px;min-width:0;align-content:start}

/* Step heading: at the top of the main card in ①③④, above the content in ② */
.yz-pane-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 20px}
.yz-learn>.yz-pane-head,.yz-pane>.yz-pane-head{padding:4px 2px 0}
.yz-pane-head>div{display:flex;flex-direction:column;gap:2px}
.yz-step{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.4;font-weight:700;color:var(--c-ink)}
.yz-step::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.yz-home .yz-pane-head h2{margin:0;padding:0;border:0;background:none;font:700 clamp(24px,3.4vw,30px)/1.3 var(--round);color:var(--ink)}
.yz-pane-head p{margin:0;font-size:13px;color:var(--ink-3);line-height:1.6}

/* Cards */
.yz-home .yz-pane .flow-section{margin:0;padding:22px clamp(20px,3.4vw,40px);border:0;border-radius:26px;background:var(--paper);box-shadow:var(--card-shadow);scroll-margin-top:calc(var(--bar-h) + var(--rail-h) + 64px)}
.yz-home .yz-pane .flow-section>.yz-pane-head{margin-bottom:14px}
.yz-home .yz-pane .flow-section-body{padding:0}
.yz-home .study-flow .flow-section>h3.flow-sr-only{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.yz-home .study-flow .flow-section>h3{position:relative;display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:0;border:0;background:none;font:700 18px/1.4 var(--round);color:var(--ink)}
.yz-home .study-flow .flow-section>h3::before{content:"";flex:none;width:36px;height:36px;border-radius:11px;background:var(--c-soft)}
.yz-home .study-flow .flow-section>h3::after{content:"";position:absolute;left:8px;top:50%;width:20px;height:20px;margin-top:-10px;background:var(--c-ink);-webkit-mask:var(--yz-ico) center/contain no-repeat;mask:var(--yz-ico) center/contain no-repeat}
.yz-home #flowBook>h3{--yz-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C10 5 7 4.5 3.5 5v13c3.5-.5 6.5 0 8.5 1.5 2-1.5 5-2 8.5-1.5V5C17 4.5 14 5 12 6.5z'/%3E%3Cpath d='M12 6.5v13'/%3E%3C/svg%3E")}
.yz-home #flowSlides>h3{--yz-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M12 16v4M8 20h8M8 12l3-3 2 2 3-3'/%3E%3C/svg%3E")}
.yz-home #flowVideo>h3{--yz-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M10 9l5 3-5 3z'/%3E%3C/svg%3E")}
.yz-home .flow-section>h3 small{font:700 12px/1.4 var(--jp);color:var(--ink-2);padding:3px 9px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line)}
.yz-card{display:grid;gap:10px;padding:22px;border-radius:22px;background:var(--paper);box-shadow:var(--card-shadow)}

/* Each tab's items follow the tab's colour */
.yz-home .yz-pane{--blue:var(--c-ink);--blue-deep:var(--c-ink);--blue-soft:var(--c-soft);--link-color:var(--c-ink);--cta-color:var(--c)}
.yz-home .yz-pane :focus-visible{outline-color:color-mix(in srgb,var(--c) 80%,transparent)}

/* Next-step cards (colour of the step they lead to) */
.yz-next{display:grid;gap:10px;padding:22px;border-radius:22px;background:var(--c-soft)}
.yz-next>b{font:700 17px/1.5 var(--round);color:var(--c-ink)}
.yz-next>p{margin:0;font-size:14px;color:var(--ink-2)}
.yz-home .yz-go{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 20px;border:0;border-radius:14px;background:var(--c);color:var(--c-on);font:700 15px/1.3 var(--jp);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .15s,transform .08s}
.yz-home .yz-go:hover{filter:brightness(1.05);background:var(--c)}
.yz-go:active{transform:translateY(1px)}
.yz-go-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--paper);color:var(--c-ink);font:600 12px/1 var(--num)}
.yz-go svg{width:16px;height:16px}
.yz-next-row{background:var(--paper);box-shadow:var(--card-shadow)}
.yz-next-row>b{color:var(--ink)}
.yz-home .yz-next-row .yz-go,.yz-home .yz-next-row .yz-go:hover{background:var(--c-soft);color:var(--c-ink)}
.yz-next-row .yz-go-n{background:var(--c);color:var(--c-on)}

.yz-note{display:grid;gap:8px;padding:22px;border-radius:22px;background:var(--paper);box-shadow:var(--card-shadow);font-size:14px;color:var(--ink-2)}
.yz-note>b{font:700 15px/1.5 var(--jp);color:var(--ink)}
.yz-note ol{margin:0;padding-left:1.3em;display:grid;gap:4px}
.yz-note p{margin:0;font-size:12.5px;color:var(--ink-3)}
.yz-pass dl{margin:0;display:grid}
.yz-pass dl>div{padding:10px 0;border-top:1px solid var(--line)}
.yz-pass dt{font-size:13px;color:var(--ink-3)}
.yz-pass dd{margin:0;font-size:13px;color:var(--ink)}
.yz-pass dd .yz-num{font-size:24px;font-weight:600;margin-right:2px}

/* ① aside: 前回の続き */
.yz-resume{display:grid;gap:6px;padding:14px 18px;border-radius:22px;background:var(--paper);box-shadow:var(--card-shadow)}
.yz-resume-label{font-size:12px;line-height:1.35;color:var(--ink-3)}
.yz-resume-title{font-size:15px;line-height:1.35}
.yz-resume-bar{position:relative;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.yz-resume-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:999px;background:var(--c)}
.yz-resume-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;line-height:1.35;color:var(--ink-3)}
.yz-resume-meta .ok{color:var(--ok-ink)}.yz-resume-meta .ng{color:var(--ng-ink)}
.yz-home .yz-resume-btn{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:0 16px;border:0;border-radius:14px;background:var(--c);color:var(--c-on);font:700 15px/1.3 var(--jp);cursor:pointer}
.yz-home .yz-resume-btn:hover{filter:brightness(1.05);background:var(--c)}

/* ① aside: 間違えた問題 */
.yz-home .yz-pane-side>.past-review{display:grid;gap:6px;margin:0;padding:14px 18px;border:0;border-radius:22px;background:var(--paper);box-shadow:var(--card-shadow)}
.yz-home .past-review>strong{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.35;font-weight:400;color:var(--ink-3)}
.yz-home .past-review>strong::before{content:"";flex:none;width:26px;height:26px;border-radius:10px;background:var(--c-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005fce' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.6L4 8.7'/%3E%3Cpath d='M4 4v4.7h4.7'/%3E%3C/svg%3E") center/16px no-repeat}
.yz-home .past-review-actions{display:grid;gap:6px;margin:0}
.yz-home .past-review-actions>span{font-size:14px;line-height:1.4;font-weight:700;color:var(--ink)}
.yz-home .past-review.study-ui button#pastReviewStart{min-height:44px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink);font:700 15px/1.3 var(--jp);padding:0 16px}
.yz-home .past-review.study-ui button#pastReviewStart:hover:not(:disabled){border-color:var(--c);color:var(--c-ink)}
.yz-home .past-review.study-ui button#pastReviewStart:disabled{color:var(--ink-3)}
.yz-home .past-review .study-help{margin:0;font-size:11.5px;line-height:1.5}
.yz-home #pastReviewSummary{margin:0;padding:10px 12px;border-radius:12px;background:var(--ok-soft);color:var(--ok-ink);font-weight:700;font-size:13.5px}
.yz-home .past-review .study-ai{margin:0;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.yz-home .study-ai>summary{padding:12px 14px}
.yz-home .study-ai-body{padding:0 14px 14px}

/* Record */
.yz-record{padding:22px;border-radius:22px;background:var(--paper);box-shadow:var(--card-shadow);display:grid;gap:8px}
.yz-record-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink-3)}
.yz-record-head b{font-size:22px;font-weight:600;color:var(--ink)}
.yz-record-head small{font-size:12.5px;color:var(--ink-3);font-weight:500}
.yz-record-bar{display:flex;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.yz-record-bar i{display:block;height:100%}
.yz-record-bar .ok{background:var(--ok)}.yz-record-bar .ng{background:var(--ng)}
.yz-record-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px}
.yz-record-legend .ok{color:var(--ok-ink)}.yz-record-legend .ng{color:var(--ng-ink)}
.yz-record-legend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;background:currentColor;vertical-align:1px}

/* ───────── Form parts (①④) ───────── */
.yz-home .flow-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.yz-home .study-flow fieldset{border:0;margin:0;padding:0;min-width:0}
.yz-home #flowPastSettings,.yz-home #flowMockSettings{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 14px}
.yz-home #flowPastSettings>*,.yz-home #flowMockSettings>*{grid-column:1/-1;margin:0}
.yz-home .flow-setting-row{display:grid;grid-template-columns:1fr;gap:6px;padding:0;border:0}
.yz-home .flow-setting-row>label{font-weight:700;font-size:13px;line-height:1.4;color:var(--ink)}
.yz-home .study-flow select{appearance:none;-webkit-appearance:none;width:100%;height:50px;padding:0 42px 0 14px;border-radius:14px;border:1.5px solid #d5dee9;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8da3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat;color:var(--ink);font:400 15px/1.3 var(--jp);cursor:pointer}
:root[data-theme="night"] .yz-home .study-flow select{border-color:var(--line-2)}
.yz-home .study-flow select:hover,.yz-home .study-flow select:focus{border-color:var(--c,var(--blue))}
.yz-home .study-flow select:disabled{opacity:.6;cursor:default}
.yz-home .flow-check{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:0;font-size:14px;font-weight:400;cursor:pointer;border:0}
.yz-home .flow-check input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--c,var(--blue));cursor:pointer}
.yz-home .flow-checks{display:grid;gap:0}
.yz-home .flow-checks .study-help{margin:4px 0 0}
.yz-home .study-help{font-size:12.5px;color:var(--ink-3);line-height:1.75;margin:-10px 0 0}
.yz-home .study-muted{color:var(--ink-3);font-size:13px}
.yz-home .study-error{color:var(--ng-ink)!important;font-size:13.5px}

/* Keep the past-question setup compact on both mobile and desktop. */
.yz-home .yz-pane #flowPast{padding-top:16px;padding-bottom:16px}
.yz-home .yz-pane #flowPast>.yz-pane-head{margin-bottom:10px}
.yz-home #flowPast .yz-pane-head p{line-height:1.45}
.yz-home #flowPastSettings{row-gap:8px}
.yz-home #flowPastSettings .flow-setting-row{gap:3px}
.yz-home #flowPastSettings select{height:44px}
.yz-home #flowPastSettings .flow-check{min-height:40px;line-height:1.45}
.yz-home #flowPastSettings .study-help{line-height:1.55}

/* Importance (A〜D) */
.yz-home .flow-importance{margin:0!important;padding:0!important;border:0!important;border-radius:0}
.yz-home .flow-importance legend{float:left;width:100%;padding:0;margin:0 0 7px;font-size:13px;font-weight:700;line-height:1.4}
.yz-home .flow-grade-caption{display:block;margin-top:3px;font-size:11.5px;font-weight:400;line-height:1.45;color:var(--ink-2)}
.yz-home .flow-grade-note{display:block;font-size:9px;line-height:1.2;white-space:nowrap}
.yz-home .flow-grade-options{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.yz-home .flow-grade-options label{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) 30px;grid-template-rows:minmax(28px,auto) auto;align-content:start;align-items:center;gap:2px 8px;padding:4px 10px;border-radius:14px;background:var(--paper);border:2px solid var(--line);cursor:pointer;font-size:13px;font-weight:700;line-height:1.4;color:var(--ink);outline:0;transition:border-color .2s,background-color .2s}
.yz-home .flow-grade-options input{position:absolute;opacity:0;width:1px;height:1px}
.yz-home .flow-grade-options strong{display:block;grid-column:1;grid-row:1;margin:0;font:700 24px/1 var(--num);color:var(--c-ink);background:none;box-shadow:none;width:auto;height:auto}
.yz-home .flow-grade-rule{grid-column:2;grid-row:1;padding:0;text-align:center;white-space:nowrap}
.yz-home .flow-grade-options small{display:block;grid-column:1/-1;grid-row:2;width:auto;margin:0;padding:2px 0 0;border-top:1px solid var(--line-2);text-align:center;font-family:var(--jp);font-size:13px;line-height:1.3;font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums}
.yz-home .flow-grade-options label::after{content:"";position:absolute;top:6px;right:10px;width:19px;height:19px;box-sizing:border-box;border-radius:6px;border:2px solid var(--line);background:var(--paper)}
.yz-home .flow-grade-options label:has(input:checked){border-color:var(--c);background:color-mix(in srgb,var(--c-soft) 55%,var(--paper))}
.yz-home .flow-grade-options label:has(input:checked)::after{border-color:var(--c);background:var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.yz-home .flow-grade-options label:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--c) 70%,transparent);outline-offset:2px}
.yz-home .flow-importance .study-help{margin:10px 0 0;font-size:12px}

/* Start row */
.yz-home .flow-start{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:2px 0 0!important;padding-top:14px;border-top:1px solid var(--line)}
.yz-home .flow-start>span{font-size:14px;color:var(--ink-2)}
.yz-home .yz-pane .study-primary,.yz-home .yz-pane .flow-start>button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 28px;border:0;border-radius:16px;background:var(--c);color:var(--c-on);font:700 16px/1.3 var(--jp);cursor:pointer;box-shadow:0 8px 18px -10px color-mix(in srgb,var(--c) 90%,transparent)}
.yz-home .yz-pane .flow-start>button{margin-left:auto}
.yz-home .yz-pane .flow-start>button::after{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.yz-home .yz-pane .study-primary:hover:not(:disabled),.yz-home .yz-pane .flow-start>button:hover:not(:disabled){filter:brightness(1.05);background:var(--c)}
.yz-home .yz-pane .study-primary:disabled{opacity:.45;cursor:default;box-shadow:none}
.yz-home #flowResume button{width:100%}

/* Generic buttons from the shared study modules */
.yz-home .study-ui button:not(.study-primary,.study-text-button,.yz-tab,.yz-go,.yz-chip,.yz-card-btn,.yz-flip,.yz-resume-btn),.yz-home .study-membership button{font:600 14px/1.4 var(--jp);min-height:42px;padding:0 16px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:none}
.yz-home .study-ui button:not(.study-primary,.study-text-button,.yz-tab,.yz-go,.yz-chip,.yz-card-btn,.yz-flip,.yz-resume-btn):hover,.yz-home .study-membership button:hover{border-color:var(--blue);color:var(--blue);background:var(--paper)}
.yz-home .study-ui button:disabled{opacity:.5;cursor:default}

/* ④ exam format */
.yz-mock-facts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 40px;margin:0 0 20px;padding:18px 20px;border-radius:18px;background:var(--c-soft)}
.yz-mock-facts small{display:block;font-size:12px;color:var(--ink-2)}
.yz-mock-facts>div>b{font-size:34px;font-weight:600;line-height:1.2;color:var(--ink)}
.yz-mock-facts>div>b span{font:700 15px/1 var(--jp);margin-left:4px}
.yz-mix{flex:1 1 280px;min-width:0;display:grid;gap:6px}
.yz-mix-bar{display:flex;gap:3px;height:14px;border-radius:999px;overflow:hidden}
.yz-mix-bar i:nth-child(1){background:var(--c)}
.yz-mix-bar i:nth-child(2){background:color-mix(in srgb,var(--c) 60%,var(--paper))}
.yz-mix-bar i:nth-child(3){background:color-mix(in srgb,var(--c) 32%,var(--paper))}
.yz-mix-legend{display:flex;gap:3px;font-size:12px;line-height:1.5;color:var(--ink-2)}
.yz-mix-legend>span{min-width:0}

/* ───────── ② 動画・本 ───────── */
.yz-home .flow-chapter{position:relative;display:grid;gap:0;min-height:72px;align-content:center;padding:10px 18px 10px 76px;border-radius:18px;background:var(--paper);border:2px solid var(--line);box-shadow:var(--card-shadow);transition:border-color .2s}
.yz-home .flow-chapter:focus-within,.yz-home .flow-chapter:hover{border-color:var(--c)}
.yz-home .flow-chapter::before{content:"";position:absolute;left:16px;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:12px;background:var(--c-soft)}
.yz-home .flow-chapter::after{content:"";position:absolute;left:28px;top:50%;width:20px;height:20px;margin-top:-10px;background:var(--c-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M10 9.5v5l4.5-2.5z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M10 9.5v5l4.5-2.5z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat}
.yz-home .flow-chapter>label{font-size:12px;font-weight:400;color:var(--ink-3);line-height:1.5}
.yz-home .study-flow .flow-chapter>select{height:auto;min-height:30px;padding:0 34px 0 0;border:0;border-radius:0;background-color:transparent;background-position:right 0 center;font:700 17px/1.45 var(--jp)}
.yz-subnav{position:sticky;top:calc(var(--bar-h) + var(--rail-h));z-index:5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:16px;background:#e6edf4;box-shadow:0 0 0 4px var(--mist)}
:root[data-theme="night"] .yz-subnav{background:var(--paper-2)}
.yz-subnav a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:12px;color:var(--ink-3)!important;font-size:15px;font-weight:700;text-decoration:none;transition:background-color .2s,color .2s}
.yz-subnav a svg{width:18px;height:18px}
.yz-subnav a[aria-current]{background:var(--paper);color:var(--c-ink)!important;box-shadow:0 1px 3px rgba(31,45,66,.12)}
.yz-home .yz-learn .flow-section{padding:22px clamp(16px,3vw,32px)}
.yz-home .flow-notice{margin:0 12px 6px;padding:12px 14px;border-radius:14px;background:var(--paper);box-shadow:var(--card-shadow);font-size:13.5px;color:var(--ink-2)}
.yz-home .flow-notice.study-error{color:var(--ng-ink)!important}

/* Materials */
.yz-home .study-flow .flow-empty{padding:16px 18px;margin:0;border-radius:16px;background:var(--c-soft,var(--paper-2));color:var(--ink-2);font-size:14px}
.yz-home .flow-empty p{margin:0}
.yz-home .flow-empty a{display:inline-block;margin-top:6px;font-weight:700}
.yz-home .flow-picker{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.yz-home .flow-picker>label{flex:none;font-size:13px;font-weight:700;color:var(--ink-2)}
.yz-home .study-flow .flow-material-title{font:700 16px/1.5 var(--jp);margin:0 0 2px;padding:0;border:0;background:none;color:var(--ink)}
.yz-home .study-meta{color:var(--ink-3);font-size:12.5px}
.yz-home .flow-description{font-size:14px;color:var(--ink-2);white-space:pre-wrap}
.yz-home .study-video{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:18px;background:#0b1220;margin:12px 0}
.yz-home .study-pdf{height:480px;max-height:70vh;min-height:300px;border-radius:14px;border:1px solid var(--line)}
.yz-home .study-flow .study-book{max-height:520px;overflow:auto;padding:0 14px;border:1px solid var(--line);border-radius:16px;background:var(--paper);line-height:1.95;overscroll-behavior:contain}
.yz-home .study-flow .study-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.yz-home .study-progress-line{color:var(--ink-3);font-size:13px}

/* ───────── ③ 重要単語：めくるカード ───────── */
.yz-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.yz-home .yz-chip{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid #d5dee9;background:var(--paper);color:var(--ink);font:400 13px/1 var(--jp);cursor:pointer}
.yz-home .yz-chip:hover{border-color:var(--c);background:var(--paper)}
.yz-home .yz-chip[aria-pressed="true"]{border-color:var(--c);background:var(--c-soft);color:var(--c-ink);font-weight:700}
.yz-cards-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 18px;font-size:14px}
.yz-cards-status>b{font-weight:600}
.yz-dots{display:flex;flex-wrap:wrap;gap:6px}
.yz-dots i{width:28px;height:6px;border-radius:999px;background:var(--line)}
.yz-dots i.is-done{background:color-mix(in srgb,var(--c) 45%,var(--paper))}
.yz-dots i.is-now{background:var(--c)}
.yz-cards-bar{flex:1 1 120px;max-width:260px;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.yz-cards-bar i{display:block;height:100%;border-radius:999px;background:var(--c)}
.yz-cards-count{margin-left:auto;font-size:13px;color:var(--ink-3)}
.yz-cards-count b{color:var(--ink);font-weight:600}
.yz-home .yz-flip{display:block;width:100%;padding:0;border:0;border-radius:24px;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer;perspective:1400px;-webkit-tap-highlight-color:transparent}
.yz-home .yz-flip:hover{background:none}
.yz-flip-inner{display:grid;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.22,.8,.24,1)}
.yz-flip.is-flipped .yz-flip-inner{transform:rotateY(180deg)}
.yz-face{grid-area:1/1;min-height:320px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:28px clamp(20px,4vw,48px);border-radius:24px;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.yz-front{align-items:center;text-align:center;background:var(--c-soft);border:1.5px solid color-mix(in srgb,var(--c) 45%,var(--paper))}
.yz-back{transform:rotateY(180deg);background:var(--paper);border:2px solid var(--c);text-align:left}
.yz-face-tag{font-size:13px;font-weight:700;color:var(--c-ink);background:color-mix(in srgb,var(--c) 30%,var(--paper));padding:4px 14px;border-radius:999px}
.yz-face-q{font:700 clamp(30px,4.2vw,46px)/1.3 var(--round);color:var(--ink);overflow-wrap:anywhere}
.yz-flip.is-long .yz-face-q{font-size:clamp(18px,2.6vw,24px);line-height:1.65}
.yz-face-hint{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.yz-face-hint::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3'/%3E%3Cpath d='M18 3v4h-4M6 21v-4h4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3'/%3E%3Cpath d='M18 3v4h-4M6 21v-4h4'/%3E%3C/svg%3E") center/contain no-repeat}
.yz-face-term{font:700 20px/1.45 var(--round);color:var(--c-ink);overflow-wrap:anywhere}
.yz-face-answer{font-size:17px;font-weight:700;line-height:1.9;color:var(--ink);overflow-wrap:anywhere}
.yz-face-note{font-size:14px;line-height:1.85;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.yz-cards-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.yz-home .yz-card-btn{min-height:58px;padding:0 12px;border-radius:16px;border:1.5px solid #d5dee9;background:var(--paper);color:var(--ink);font:700 16px/1.3 var(--jp);cursor:pointer}
.yz-home .yz-card-btn:hover{border-color:var(--c);background:var(--paper)}
.yz-home .yz-card-btn.is-main{border:0;background:var(--c);color:var(--c-on);box-shadow:0 8px 18px -10px color-mix(in srgb,var(--c) 90%,transparent)}
.yz-home .yz-card-btn.is-main:hover{filter:brightness(1.05);background:var(--c)}
.yz-cards-done{display:grid;gap:6px;justify-items:center;text-align:center;padding:36px 20px;border-radius:24px;background:var(--c-soft)}
.yz-cards-done>b{font:700 20px/1.5 var(--round);color:var(--ink)}
.yz-cards-done>p{margin:0;font-size:14px;color:var(--ink-2)}
.yz-cards-done .yz-cards-actions{width:100%;max-width:560px}
.yz-cards-ask{margin-top:12px}
.yz-home #flowCards .study-ai{margin-top:16px;border:1px solid var(--line);border-radius:14px}

/* Membership */
.yz-home .study-membership{margin:24px 12px 0;padding:18px 22px;border-radius:22px;border:0;background:var(--paper);box-shadow:var(--card-shadow);color:var(--ink);font-family:var(--jp);font-size:14px}
.yz-home .study-membership h3{margin:0 0 4px;padding:0;border:0;background:none;font-size:16px;font-weight:700}
.yz-home .study-membership summary{color:var(--blue);font-weight:600}
.yz-home .study-membership table{font-size:13px}
.yz-home .study-membership th,.yz-home .study-membership td{border-color:var(--line)}
.yz-home .study-membership thead{background:var(--paper-2)}
.yz-home .study-membership a{color:var(--blue)}
.yz-home .study-membership .study-actions a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:12px;background:var(--blue);color:#fff;text-decoration:none;font-weight:700}
.yz-home .study-paywall{border-radius:16px;border:1px solid var(--line);background:var(--paper-2)}

/* Bottom links & footer */
.yz-home .flow-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:22px 18px 0;font-size:13px}
.yz-foot{max-width:1240px;margin:0 auto;padding:22px 18px calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3);display:grid;gap:10px}
.yz-foot nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.yz-foot a{color:var(--ink-2);text-decoration:none}
.yz-foot a:hover{color:var(--blue);text-decoration:underline}

@media (min-width:560px){
 .yz-home #flowPastSettings{grid-template-columns:repeat(2,minmax(0,1fr))}
 .yz-home #flowPastSettings>.flow-setting-row{grid-column:auto}
}
@media (min-width:760px){
 .yz-hero{padding:12px 24px 0}
 .yz-railwrap{padding:14px 24px 16px}
 .yz-home .yz-tab{flex-direction:row;justify-content:flex-start;gap:12px;min-height:66px;padding:10px 16px;text-align:left;font-size:16px;line-height:1.4}
 .yz-tab small{display:block;font:400 12px/1.4 var(--jp);color:var(--ink-3)}
 .yz-pane{padding:2px 24px 6px}
 .yz-home .flow-notice{margin:0 24px 6px}
 .yz-home .flow-setting-row{grid-template-columns:1fr}
 .yz-next-row{grid-template-columns:1fr auto auto;align-items:center}
 .yz-foot,.yz-home .flow-bottom{padding-left:24px;padding-right:24px}
 .yz-home .study-membership{margin:24px 24px 0}
 .yz-home .yz-bar-in{padding:0 24px}
}
@media (min-width:1000px){
 .yz-pane-grid{grid-template-columns:minmax(0,1fr) 320px}
 .yz-pane-side{position:sticky;top:calc(var(--bar-h) + var(--rail-h) + 4px)}
 .yz-learn{max-width:920px;margin:0 auto;width:100%}
}
@media (max-width:420px){.yz-logo small{display:none}}
@media (max-width:559px){.yz-mix-legend{flex-wrap:wrap;gap:2px 14px}.yz-mix-legend>span{flex:none!important}}
@media (prefers-reduced-motion:no-preference){html:has(.yz-home){scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){.yz-track,.yz-puck,.yz-pane,.yz-flip-inner{transition:none!important}}

.yz-home select#flowField[hidden]{display:none!important}
.yz-home .flow-field-picker{min-width:0;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.yz-home .flow-field-picker>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:6px 15px;cursor:pointer;list-style:none;line-height:1.4}
.yz-home .flow-field-picker>summary::-webkit-details-marker{display:none}
.yz-home .flow-field-picker>summary::after{content:'';width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);flex-shrink:0;margin-right:3px}
.yz-home .flow-field-picker[open]>summary::after{transform:rotate(225deg)}
.yz-home .flow-field-picker>summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:14px}
.yz-home .flow-field-options{max-height:55vh;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--line);padding:8px 12px}
.yz-home .flow-field-options fieldset{border:0;border-top:1px solid var(--line);padding:6px 0;margin:6px 0;min-width:0}
.yz-home .flow-field-options label{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 4px;font-size:14px;line-height:1.4;cursor:pointer}
.yz-home .flow-field-children>label{padding-left:20px;font-weight:400}
.yz-home .flow-field-options input{width:20px;height:20px;flex:0 0 20px;accent-color:var(--ink);margin:0}
.yz-home .flow-field-domain{display:flex;align-items:center;gap:6px;font-weight:700}
.yz-home .flow-field-domain>label{flex:0 0 32px}
.yz-home .flow-field-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:1;min-width:0;min-height:44px;padding:6px 4px;border:0;background:transparent;color:var(--ink);font:700 14px/1.4 var(--jp);text-align:left;cursor:pointer}
.yz-home .flow-field-toggle::after{content:'';width:7px;height:7px;margin-right:4px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);flex-shrink:0}
.yz-home .flow-field-toggle[aria-expanded="true"]::after{transform:rotate(225deg)}
.yz-home .flow-field-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-radius:6px}
.yz-home .flow-field-done{display:block;width:100%;min-height:42px;margin:6px 0;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font:inherit;cursor:pointer}

.yz-home #flowCards .yz-pane-head>p,.yz-home [data-step="3"] .yz-note li:first-child{white-space:nowrap}
.yz-home .flow-year-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:6px 15px;border:1.5px solid #d5dee9;border-radius:14px;background:var(--paper);color:var(--ink);font:400 15px/1.4 var(--jp);text-align:left;cursor:pointer}
.yz-home .flow-year-trigger::after{content:'';width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);flex-shrink:0;margin-right:3px}
.yz-home .flow-year-trigger:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.yz-home .flow-year-dialog{width:min(440px,calc(100% - 24px));max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:26px;background:var(--paper);color:var(--ink);font-family:var(--jp);box-shadow:0 12px 48px #0003;overflow:hidden}
.yz-home .flow-year-dialog[open]{display:flex;flex-direction:column}
.yz-home .flow-year-dialog::backdrop{background:#0006}
.yz-home .flow-year-list{overflow-y:auto;overscroll-behavior:contain;min-height:0}
.yz-home .flow-year-list h2{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0;padding:24px 20px 14px;border:0;background:none;color:var(--ink);font:500 20px/1.4 var(--jp)}
.yz-home .flow-year-list h2 small{font:400 12px/1.4 var(--jp);color:var(--ink-3)}
.yz-home .flow-year-choice{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:14px 22px 14px 36px;border-bottom:1px solid var(--line);font-size:20px;line-height:1.4;cursor:pointer}
.yz-home .flow-year-choice:first-child{padding-left:20px;min-height:76px}
.yz-home .flow-year-choice input{appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:0 0 22px;border:2px solid var(--ink-2);border-radius:50%;margin:0;background:transparent;cursor:pointer}
.yz-home .flow-year-choice input:checked{background:radial-gradient(circle,var(--ink-2) 0 5px,transparent 6px)}
.yz-home .flow-year-choice input:focus-visible{outline:2px solid var(--ink-2);outline-offset:4px}
.yz-home .flow-year-footer{flex-shrink:0;display:flex;justify-content:flex-end;border-top:1px solid var(--line);padding:10px 18px}
.yz-home .flow-year-footer button{min-width:90px;min-height:44px;padding:8px 24px;border:0;border-radius:12px;background:var(--ink);color:var(--paper);font:700 15px/1.4 var(--jp);cursor:pointer}

/* Keep the approved two-by-two importance cards legible on narrow phones. */
@media(max-width:379px){
 .yz-home .flow-grade-options label{grid-template-columns:24px minmax(0,1fr) 24px;gap:2px 5px;padding:4px 8px;font-size:12px}
 .yz-home .flow-grade-options strong{font-size:24px}
 .yz-home .flow-grade-rule{padding-right:0}
 .yz-home .flow-grade-note{font-size:9px}
 .yz-home .flow-grade-options label::after{width:16px;height:16px;right:8px;top:8px;border-radius:5px}
 .yz-home .flow-grade-options small{font-size:13px}
}

/* Compact step 1 on phones, keeping the start action near the first viewport. */
@media(max-width:767px){
 .yz-home .yz-pane #flowPast{padding:10px 16px;border-radius:22px}
 .yz-home .yz-pane #flowPast>.yz-pane-head{gap:5px;margin-bottom:7px}
 .yz-home #flowPast .yz-pane-head>div{flex-direction:row;align-items:center;gap:8px}
 .yz-home #flowPast .yz-step{font-size:10px;gap:4px;white-space:nowrap}
 .yz-home #flowPast .yz-step::before{width:5px;height:5px}
 .yz-home #flowPast .yz-pane-head h2{font-size:20px;line-height:1.25}
 .yz-home #flowPast .yz-pane-head p{font-size:10.5px;line-height:1.35}
 .yz-home #flowPast .yz-friend{width:42px;height:42px;top:0}
 .yz-home #flowPastSettings{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px}
 .yz-home #flowPastSettings>.flow-setting-row{grid-column:auto;min-width:0;gap:2px;align-content:start}
 .yz-home #flowPastSettings>.flow-setting-row:has(.flow-field-picker[open]){grid-column:1/-1}
 .yz-home #flowPastSettings .flow-setting-row>label{font-size:11px;line-height:1.3}
 .yz-home #flowPastSettings select{height:40px;font-size:12px;padding-left:10px}
 .yz-home #flowPastSettings .flow-year-trigger{min-height:40px;padding:5px 10px;gap:6px;font-size:12px;font-weight:400}
 .yz-home #flowPastSettings .flow-field-picker>summary{min-height:38px;padding:5px 10px;gap:6px;font-size:12px}
 .yz-home #flowPast .flow-importance legend{font-size:11px;margin-bottom:4px;line-height:1.3}
 .yz-home #flowPast .flow-grade-caption{font-size:10px;line-height:1.3;margin-top:1px}
 .yz-home #flowPast .flow-grade-options{gap:6px}
 .yz-home #flowPast .flow-grade-options label{grid-template-columns:24px minmax(0,1fr) 24px;grid-template-rows:minmax(25px,auto) auto;gap:1px 6px;padding:3px 8px;font-size:12px;line-height:1.25;border-radius:12px}
 .yz-home #flowPast .flow-grade-options strong{font-size:22px;line-height:1}
 .yz-home #flowPast .flow-grade-options small{font-size:12px;line-height:1.2;padding-top:2px}
 .yz-home #flowPast .flow-grade-rule{padding-right:0}
 .yz-home #flowPast .flow-grade-note{font-size:9px;line-height:1.1}
 .yz-home #flowPast .flow-grade-options label::after{top:5px;right:8px;width:16px;height:16px;border-radius:5px}
 .yz-home #flowPastSettings .flow-check{min-height:32px;font-size:12px;gap:8px;line-height:1.3}
 .yz-home #flowPastSettings .flow-check input{width:18px;height:18px}
 .yz-home #flowPastSettings .flow-checks .study-help{font-size:10px;line-height:1.35;margin:0}
 .yz-home #flowPast .flow-start{flex-wrap:nowrap;gap:6px;margin-top:0!important;padding-top:6px}
 .yz-home #flowPast .flow-start>span{font-size:11px;line-height:1.3;min-width:0}
 .yz-home #flowPast .flow-start>button{flex-shrink:0;min-height:44px;padding:0 12px;font-size:14px;gap:5px;border-radius:12px}
 .yz-home #flowPast .flow-start>button::after{width:14px;height:14px}
}

/* Compact the review accordion without changing its expanded content. */
.yz-home .past-review .study-ai>summary{min-height:40px;padding:9px 12px;font-size:12px;line-height:1.5}

/* Field selection uses the same modal surface as exam years. */
.yz-home .flow-field-dialog{height:min(720px,calc(100dvh - 48px))}
.yz-home .flow-field-dialog>h2{flex-shrink:0;margin:0;padding:20px 20px 14px;border:0;background:none;color:var(--ink);font:500 20px/1.4 var(--jp)}
.yz-home .flow-field-dialog .flow-field-options{flex:1;min-height:0;max-height:none;padding:8px 16px;border-top:1px solid var(--line)}
.yz-home .flow-field-dialog .flow-field-done{width:auto;margin:0}

/* Saved-question practice follows the compact mistake-review card. */
.yz-home .favorite-practice>strong::before{content:"★";display:grid;place-items:center;background:var(--paper-2);color:var(--ink-2);font-size:20px}
.yz-home .favorite-practice.study-ui button#favoriteStart{min-height:44px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink);font:700 15px/1.3 var(--jp);padding:0 16px}
.yz-home .favorite-practice.study-ui button#favoriteStart:hover:not(:disabled){border-color:var(--c);color:var(--c-ink)}
.yz-home .favorite-practice.study-ui button#favoriteStart:disabled{color:var(--ink-3)}

/* Resume is immediately left of the past-question start action. */
.yz-home #flowPast .flow-start{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.yz-home #flowPast .flow-start>span{grid-column:1/-1}
.yz-home #flowPast .flow-start>button{width:100%;min-width:0;margin:0;min-height:48px;padding:8px 12px}
.yz-home #flowPast .flow-start>button.yz-resume-top{border:1px solid var(--line-2);background:var(--paper-2);color:var(--ink);box-shadow:none;font-weight:700}
.yz-home #flowPast .flow-start>button.yz-resume-top::after{display:none}
.yz-home #flowPast .flow-start>button.yz-resume-top:hover:not(:disabled){background:var(--paper-2);filter:brightness(1.03)}
@media(max-width:767px){.yz-home #flowPast .flow-start>button{min-height:44px;padding:7px 6px;font-size:clamp(12px,3.4vw,14px);line-height:1.35;gap:4px}}

/* Compact native importance menu, with all grade combinations retained. */
.yz-home #flowImportance{display:block;width:100%;min-height:44px;box-sizing:border-box;padding:10px 12px;border:1px solid #d5d1c7;border-radius:10px;background:#fffdf8;color:inherit;font:inherit;font-size:14px}

/* Importance uses the same modal layout as the field selector. */
#flowImportance[hidden]{display:none!important}
.yz-home .flow-importance-hint{margin:0;padding:0 20px 16px;color:var(--ink-2);font-size:13px}
.yz-home .flow-importance-dialog{height:auto;min-height:0}
.yz-home .flow-importance-dialog .flow-field-options label{min-height:72px;gap:14px;border-bottom:1px solid var(--line)}
.yz-home .flow-importance-dialog .flow-field-options label:last-child{border:0}
.yz-home .flow-importance-dialog strong{font:700 28px/1 var(--num);min-width:24px}
.yz-home .flow-importance-dialog input:checked+strong{color:var(--c-ink)}