/* PAW component styles; shared layout lives in blackboard-spacing.css.
   パーツの内側は上下--space/2・左右--space。情報パネル（リンク付き履歴も含む）は上下左右--space。
   字形の空き・line-height・操作上の最小高さはpaddingと別に扱う。 */
:root{color-scheme:dark;--text-size-small:14px;--text-size-normal:18px;--text-size-large:22px;font-size:var(--text-size-normal);--exam-board-bg:#20382d;--exam-chalk-color:#e5e5d9;--exam-input-bg:rgba(255,255,255,.25);--side:var(--exam-board-bg);--panel:var(--exam-board-bg);--panel-2:#29493b;--panel-3:#355945;--border:#597764;--line:#456452;--text:var(--exam-chalk-color);--muted:#becfbc;--accent:#b7dcb2;--primary-button-fill:#456f66;--mint:#a6d6a3;--ink:#142c23;--alert:#f0cba3;--error-text:#ffb4ab}
*{box-sizing:border-box}
/* Portal background uses the viewport, independent of the active page height.
   mobile-background.css keeps the phone background scrolling as specified. */
body{margin:0;min-height:100vh;background:linear-gradient(to bottom left,#ffffff 0%,#dce8dc 20%,#b3c9b5 42%,#86a38b 65%,#65856e 80%,#31533f 100%);background-attachment:fixed;color:var(--text);font:1rem/1.65 "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn-primary:focus,.recall-primary:focus{outline:none}
input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* Explanation reading targets keep focus without a browser-default frame. */
#explanation:focus,#history-explanation-title:focus{outline:none}
h1{margin-top:0}
h2{margin-top:0}
h3{margin-top:0}
p{margin:0 0 var(--space)}
h1{font-size:2.1rem;line-height:1.35;letter-spacing:.02em;margin:0 0 var(--space)}
h2{font-size:1.25rem;line-height:1.4;margin:0}
h3{font-size:1.02rem;margin:0}
.app{--rail-width:244px;max-width:1480px;margin:0 auto 0 0;display:grid;align-items:start}
.sidebar{display:flex;flex-direction:column;background:var(--side);border:1px solid var(--border);border-radius:var(--radius)}
.profile-mini{display:flex;align-items:center;gap:var(--space)}
.profile-mini strong{display:block;font-size:1.02rem}
.profile-mini small{display:block;color:var(--muted);font-size:.8rem}
.nav{display:grid;gap:0}
.nav hr{margin:var(--space) 0;border:0;border-top:1px solid var(--line);width:100%}
.nav button{display:flex;gap:var(--space);align-items:center;text-align:left;border:1px solid transparent;background:transparent;color:var(--text);padding:calc(var(--space) / 2) var(--space);border-radius:var(--radius);font-weight:700}
.nav button:hover{background:var(--panel-2)}
.nav button.active{border-color:var(--accent);background:var(--panel-2)}
.main{min-width:0}
.view{display:none}
.view.active{display:block}
.content-stack{display:grid}
.app [hidden]{display:none!important}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.panel-header{display:flex;align-items:center;justify-content:space-between}
.small{font-size:.84rem;color:var(--muted)}
.heading-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space);margin-bottom:var(--space)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:calc(var(--space) / 2) var(--space);min-height:44px;border-radius:var(--radius);border:1.5px solid var(--border);background:var(--panel-2);color:var(--text);font-weight:800;text-align:center;transition:background .13s ease,border-color .13s ease}
.btn:hover{background:var(--panel-3);border-color:var(--mint)}
.btn-primary{background:var(--primary-button-fill);color:#fff;border-color:var(--primary-button-fill)}
.btn-primary:hover{background:var(--primary-button-fill);border-color:var(--primary-button-fill);filter:brightness(1.08)}
.app button.is-unimplemented,.app button.is-unimplemented:hover{background:var(--panel);border-color:var(--line);color:var(--muted)}
.app button.is-unimplemented .exam-card-level{color:inherit}
.app button.is-unimplemented:disabled{cursor:not-allowed}
.button-row{display:flex;flex-wrap:wrap;align-items:center}
.summary-panel{--summary-number-size:1.65rem;display:flex;flex-direction:column;justify-content:center}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}

.summary-item{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space);background:rgba(255,255,255,.015)}
.summary-item b{display:block;font-size:1.65rem;color:var(--accent);line-height:1.3}
.summary-item span{font-size:.82rem;color:var(--muted)}
.summary-item{min-width:0}
/* ラベルと数値は別要素だが、１つの統計表示として扱う。
   上下に部品間の--spaceを加えず、各文字サイズのline-heightは残す。
   外枠のpaddingやカード間のgapまで0にしないこと。 */
.summary-item>span{display:block;margin-bottom:0}
.summary-item>b{text-align:center}
.summary-item>.summary-duration{justify-content:center}
/* 折返しは同じ表示内の改行なのでrow-gapは0。
   横の文字組み間隔は--spaceの半分、小さい単位は数字のbaselineに揃える。 */
.summary-item .summary-duration{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 calc(var(--space) / 2);font-size:var(--summary-number-size)}
/* 教科別の問題数＋時間は１行固定。幅不足でも縮小・切取りせず、はみ出しを許容する指定。 */
.weekly-subject-panel .summary-duration{flex-wrap:nowrap;white-space:nowrap}
.summary-duration .summary-time-part{font:inherit;color:inherit;white-space:nowrap}
.summary-item b small{font-size:calc(var(--summary-number-size) * .55);color:#b4b9b5}
.weekly-subject-panel .summary-item b small{color:var(--text)}
.weekly-subject-count{margin-inline-end:calc(var(--space) / 2)}
.summary-feedback{margin:0}
.subject-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.subject-name{font-size:1.15rem;font-weight:850}
.weekly-subject-heading>.subject-name{font-size:1.15rem;font-weight:850}
.subject-number{color:var(--accent);font-size:1.55rem;font-weight:850;font-variant-numeric:tabular-nums}
.subject-number{flex-shrink:0}
.subject-number small{font-size:.67rem;color:#b4b9b5;margin-left:0}
/* LVは教科名の右端～カードの内枠端の中央に置く指定。
   負のend marginで右padding分まで見出し領域を広げている（文字の上下位置補正ではない）。
   下の数値も同じ統計表示の続きなのでmargin-bottomは0、文字サイズと行高は維持する。 */
.weekly-subject-heading{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:start;margin-inline-end:calc(-1 * var(--space));margin-bottom:0}
.weekly-subject-level{justify-self:center;font-size:calc(1.55rem * 1.5);line-height:1}
.weekly-subject-level small{font-size:calc(.67rem * 1.5)}
.taxonomy{--tax-row-height:45px;--tax-list-height:calc(4 * var(--tax-row-height) + 3 * var(--tax-gap));display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,3fr))}
.tax-column{display:grid;grid-template-columns:minmax(0,1fr) 10px;min-width:0;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space)}
.tax-body{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:var(--tax-row-height);align-content:start;gap:var(--tax-gap);height:var(--tax-list-height);min-height:0}
#tax-big{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none}
#tax-mid{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none}
#tax-big::-webkit-scrollbar{display:none}
#tax-mid::-webkit-scrollbar{display:none}
.tax-scrollbar{appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:ltr;width:10px;min-width:0;height:var(--tax-list-height);padding:0;margin:0;border:0;border-radius:var(--radius);background:var(--line);cursor:pointer}
.tax-scrollbar::-webkit-slider-runnable-track{width:10px;height:100%;border:1px solid var(--border);border-radius:var(--radius);background:var(--line)}
.tax-scrollbar::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:8px;height:var(--tax-thumb-size,28px);border:1px solid var(--panel-2);border-radius:var(--radius);background:var(--panel)}
.tax-scrollbar::-moz-range-track{width:8px;height:100%;border:1px solid var(--border);border-radius:var(--radius);background:var(--line)}
.tax-scrollbar::-moz-range-thumb{width:8px;height:var(--tax-thumb-size,28px);border:1px solid var(--panel-2);border-radius:var(--radius);background:var(--panel)}
.tax-scrollbar:disabled{cursor:default;opacity:.55}
.tax-scrollbar:disabled::-webkit-slider-thumb{height:var(--tax-list-height)}
.tax-scrollbar:disabled::-moz-range-thumb{height:var(--tax-list-height)}
.tax-subject-column{grid-template-columns:minmax(0,1fr)}
.tax-option{display:flex;width:100%;height:var(--tax-row-height);line-height:1.2;align-items:center;justify-content:space-between;gap:var(--space);text-align:left;padding:calc(var(--space) / 2) var(--space);border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--text);font-weight:690;min-width:0}
.tax-option>span:first-child{display:block;flex:1}
.tax-option:hover{background:var(--panel-2)}
.tax-option.active{background:var(--panel-2);border-color:var(--accent)}
.tax-option .opt-score{flex-shrink:0;white-space:nowrap;font-size:1.23rem;color:var(--muted);font-variant-numeric:tabular-nums}
.opt-score-unit{font-size:.6em;color:#b4b9b5}
.level-unit{font-size:.6em;color:#b4b9b5}
.pathline{display:flex;flex-wrap:nowrap;min-width:0;max-width:100%;align-items:center;gap:var(--space);color:var(--muted);font-size:.87rem;margin-bottom:var(--space)}
.pathline span{color:var(--text)}
.pathline em{flex-shrink:0;color:var(--accent);font-style:normal}
.detail{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius)}
.detail-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.history-list{display:grid}
.history-entry{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel-2);padding:var(--space);align-items:center}
.history-day{color:var(--accent);font-weight:800}
.history-content{flex:1}
.history-content strong{display:block}
.history-content small{color:var(--muted)}
.history-result{color:var(--mint)}
.history-list{margin:0;padding:0;list-style:none}
.history-header h2{min-width:0}
.history-filters{flex-wrap:nowrap;margin-left:auto;flex-shrink:0}
.history-filters button{font-size:.78rem;white-space:nowrap;padding:calc(var(--space) / 2) var(--space)}
.history-entry{display:grid;grid-template-columns:minmax(150px,.85fr) minmax(0,3fr) 2rem}
.history-day{font-size:.78rem;line-height:1.5;min-width:0}
.history-content{min-width:0;overflow-wrap:anywhere}
.history-content small{font-size:.76rem;display:block}
.history-result{font-size:1.9rem;line-height:1;text-align:center;font-weight:700}
.history-incorrect{color:var(--alert)}
.settings-fields-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space);align-items:start;min-width:0}
/* ラベル＋入力欄は一つの入力パーツ。内部は半余白、別の入力パーツとの間は親の共通余白。 */
.settings-field{display:grid;gap:calc(var(--space) / 2);min-width:0}
.settings-field>.field-label,.settings-field>.small{margin:0}
.settings-label-row{display:flex;align-items:flex-end;gap:var(--space);white-space:nowrap}
.settings-label-row>.field-label{margin:0;flex-shrink:0}
.settings-label-row>.small{font-size:.72rem;flex-shrink:0}
.view[data-page="settings"] .field-label{padding-inline-start:var(--space)}
.settings-action-space{visibility:hidden;pointer-events:none;white-space:nowrap;font-weight:700}
.settings-input-action{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space);align-items:center;min-width:0}
.settings-input-action>.btn{white-space:nowrap}
/* Input and visibility toggle are one compound part; keep the toggle off its outer border. */
.settings-password-control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-width:0;padding-inline-end:calc(var(--space) / 2);border:1px solid var(--border);border-radius:var(--radius);background:var(--panel-2)}
.settings-password-control .field-input{min-width:0;border:0;background:transparent}
.settings-password-control .settings-password-toggle{position:static;margin:0;padding:calc(var(--space) / 2) var(--space);border:0;border-radius:var(--radius);background:var(--panel-3);color:var(--text);font:inherit;font-size:.72rem;line-height:1.4;white-space:nowrap}
.settings-password-dialog{width:min(520px,calc(100% - 2 * var(--space)));max-height:calc(100dvh - 2 * var(--space));overflow:auto;margin:auto;padding:var(--space);border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);color:var(--text)}
.settings-password-dialog::backdrop{background:rgba(0,0,0,.55)}
.settings-password-dialog h2{margin:0}
.settings-password-dialog>.small{margin-bottom:var(--space)}
.parent-notice{min-width:0;padding:var(--space);border:1px solid var(--border);border-radius:var(--radius);background:var(--panel-2)}
.parent-notice p{margin:var(--space) 0 0}
.settings-input-action .field-input,.settings-field .field-input{min-width:0;min-inline-size:0;max-width:100%;max-inline-size:100%;box-sizing:border-box}
.field-label{display:block;font-weight:750}
.field-input{display:block;width:100%;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:calc(var(--space) / 2) var(--space)}
.date-field{display:block;width:100%;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:calc(var(--space) / 2) var(--space)}
.date-field{min-width:0;min-inline-size:0;max-width:100%}
/* 日付入力は外側.date-fieldが余白を持つ複合パーツ。内側入力は0にして二重化を防ぐ。 */
.date-field .field-input{-webkit-appearance:none;appearance:none;inline-size:100%;margin:0;border:0;border-radius:var(--radius);padding:0;min-height:1.65em;line-height:1.65;background:transparent;text-align:left}
.date-field:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.date-field .field-input:focus{outline:none}
.date-field .field-input::-webkit-date-and-time-value{min-width:0;min-inline-size:0;min-height:1.65em;text-align:left}
.date-field .field-input::-webkit-datetime-edit{min-width:0;padding:0}
.date-field .field-input::-webkit-datetime-edit-text{padding-inline:.25em}
.setting-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.setting-row:last-child{border-bottom:0}
.setting-row strong{font-weight:780}
.setting-row p{margin:var(--space) 0 0;color:var(--muted);font-size:.83rem}
.segmented{display:flex;flex-wrap:wrap}
.segmented button{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:calc(var(--space) / 2) var(--space)}
.segmented button.selected{border-color:var(--accent);color:var(--accent);background:var(--panel-3)}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
.nav button{box-shadow:none!important;transform:none!important}
.tax-option{box-shadow:none!important;transform:none!important}
.btn{box-shadow:none!important;transform:none!important}
.nav button.active{border-left-width:1px}
.tax-option.active{border-left-width:1px}
.small-scores{display:grid;margin:var(--space) 0 var(--space)}
.small-score-panel{--small-value-width:4rem}
/* Numeric suffixes share half the portal spacing; component gaps use --space. */
.summary-item b small,.subject-number small,.opt-score-unit,.level-unit,.small-score-unit,.exam-card-level small{margin-inline-start:calc(var(--space) / 2)}
.small-score-unit{font-size:.65em;color:#b4b9b5}
.small-score-row .small-score-value{white-space:nowrap}
.small-score-row .small-score-value:empty::before{content:"\00a0"}
.small-score-row{display:grid;align-items:center}
.small-score-name{color:var(--text);font-weight:750}
.subject-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:clip}
.tax-option>span:first-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:clip}
.small-score-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:clip}
.pathline>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:clip}
.history-content>strong{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:clip}
.small-score-track{height:19px;position:relative;border:1px solid var(--line);background:repeating-linear-gradient(to right,transparent 0,transparent calc(25% - 1px),rgba(255,255,255,.12) calc(25% - 1px),rgba(255,255,255,.12) 25%),var(--panel-3);border-radius:4px;overflow:hidden}
.small-score-fill{height:100%;background:var(--mint);border-radius:3px 0 0 3px;display:block}
.small-score-value{text-align:right;font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--mint)}
.small-axis{color:var(--muted);font-size:.75rem}
.small-axis span:first-child{text-align:left}
.small-axis span:not(:first-child):not(:last-child){text-align:center}
.small-axis span:last-child{text-align:right}
.small-axis{display:grid}
.small-axis-labels{grid-column:2;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:.73rem}
.heading-row > div{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space)}
.heading-row h1{margin:0;color:var(--exam-board-bg)}
.heading-row p{margin:0;color:#82948a;font-weight:600}
.main{padding-top:0}
.view > .heading-row{align-items:center;justify-content:flex-start}
.view > .heading-row > div{flex-wrap:nowrap}
.view > .heading-row h1{flex-shrink:0;white-space:nowrap}

.left-rail{position:fixed;top:var(--space);left:var(--space);width:var(--rail-width);height:calc(100dvh - 2 * var(--space));align-self:start;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;z-index:20}
.main{grid-column:2}
.masthead{display:inline-flex;align-items:center;padding:0 var(--space);text-decoration:none;width:max-content;max-width:100%}
a.masthead{cursor:pointer}
.left-rail > .sidebar{position:static;top:auto;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0}
#selected-path{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space);white-space:nowrap;overflow-x:auto;max-width:100%;margin-bottom:0;font-size:1.03rem;scrollbar-width:thin}
#selected-path span{flex:0 0 auto}
#selected-path span:last-of-type{color:var(--text);font-weight:800}
#selected-path em{flex:0 0 auto;color:var(--accent);font-weight:750}
#status-detail .detail-top{display:block}
.settings-password-dialog .btn-primary{background:#f48c47;border-color:#cf662a;color:#fff}
.settings-password-dialog .btn-primary:hover{background:#e77735;border-color:#b85b24}
html.font-size-small{font-size:var(--text-size-small)}
html.font-size-normal{font-size:var(--text-size-normal)}
html.font-size-large{font-size:var(--text-size-large)}
#font-controls{display:grid;grid-template-columns:repeat(3,1fr)}
#font-controls button{display:flex;align-items:center;justify-content:center;letter-spacing:0}
#font-controls [data-size="small"]{font-size:var(--text-size-small)}
#font-controls [data-size="normal"]{font-size:var(--text-size-normal)}
#font-controls [data-size="large"]{font-size:var(--text-size-large)}
button:disabled{cursor:default;opacity:.7}
.session-message:empty{display:none}
.session-message{background:var(--panel);color:var(--alert);border:1px solid var(--alert);border-radius:var(--radius);padding:var(--space)}
.profile-mini strong{overflow-wrap:anywhere}
#settings-msg:not(:empty){margin-top:var(--space)}
/* score-0 through score-100 are generated by blackboard.js.
   Explicit classes avoid inline width declarations under the CSP. */
.score-0{width:0%}
.score-1{width:1%}
.score-2{width:2%}
.score-3{width:3%}
.score-4{width:4%}
.score-5{width:5%}
.score-6{width:6%}
.score-7{width:7%}
.score-8{width:8%}
.score-9{width:9%}
.score-10{width:10%}
.score-11{width:11%}
.score-12{width:12%}
.score-13{width:13%}
.score-14{width:14%}
.score-15{width:15%}
.score-16{width:16%}
.score-17{width:17%}
.score-18{width:18%}
.score-19{width:19%}
.score-20{width:20%}
.score-21{width:21%}
.score-22{width:22%}
.score-23{width:23%}
.score-24{width:24%}
.score-25{width:25%}
.score-26{width:26%}
.score-27{width:27%}
.score-28{width:28%}
.score-29{width:29%}
.score-30{width:30%}
.score-31{width:31%}
.score-32{width:32%}
.score-33{width:33%}
.score-34{width:34%}
.score-35{width:35%}
.score-36{width:36%}
.score-37{width:37%}
.score-38{width:38%}
.score-39{width:39%}
.score-40{width:40%}
.score-41{width:41%}
.score-42{width:42%}
.score-43{width:43%}
.score-44{width:44%}
.score-45{width:45%}
.score-46{width:46%}
.score-47{width:47%}
.score-48{width:48%}
.score-49{width:49%}
.score-50{width:50%}
.score-51{width:51%}
.score-52{width:52%}
.score-53{width:53%}
.score-54{width:54%}
.score-55{width:55%}
.score-56{width:56%}
.score-57{width:57%}
.score-58{width:58%}
.score-59{width:59%}
.score-60{width:60%}
.score-61{width:61%}
.score-62{width:62%}
.score-63{width:63%}
.score-64{width:64%}
.score-65{width:65%}
.score-66{width:66%}
.score-67{width:67%}
.score-68{width:68%}
.score-69{width:69%}
.score-70{width:70%}
.score-71{width:71%}
.score-72{width:72%}
.score-73{width:73%}
.score-74{width:74%}
.score-75{width:75%}
.score-76{width:76%}
.score-77{width:77%}
.score-78{width:78%}
.score-79{width:79%}
.score-80{width:80%}
.score-81{width:81%}
.score-82{width:82%}
.score-83{width:83%}
.score-84{width:84%}
.score-85{width:85%}
.score-86{width:86%}
.score-87{width:87%}
.score-88{width:88%}
.score-89{width:89%}
.score-90{width:90%}
.score-91{width:91%}
.score-92{width:92%}
.score-93{width:93%}
.score-94{width:94%}
.score-95{width:95%}
.score-96{width:96%}
.score-97{width:97%}
.score-98{width:98%}
.score-99{width:99%}
.score-100{width:100%}
.settings-password-dialog form{display:grid;gap:var(--space)}
.settings-password-dialog form>p{margin:0}
#settings-msg:empty{display:none}
.small-axis{margin:var(--space) 0 0}
.small-score-row{grid-template-columns:minmax(100px,1.2fr) minmax(0,3fr) var(--small-value-width)}
.small-axis{grid-template-columns:minmax(100px,1.2fr) minmax(0,3fr) var(--small-value-width)}


/* Inline errors are red; loading, empty states and successful saves keep their normal color. */
.form-error,[data-error="true"],[data-state="error"] .attempt-chart-feedback{color:var(--error-text)}