/* TypeRally の土台の画面（ログイン・棚・作成・設定・トップ）。
   色と形の元は TARGETLET の着せ替え（/style.css の変数）。ここには土台の画面だけの並べ方を書く。 */
.masthead a,a.btn{text-decoration:none}
.book .bt{padding-right:22px}
.masthead select.chip{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:22px; font-family:inherit;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%, calc(100% - 8px) 55%; background-size:4px 4px, 4px 4px; background-repeat:no-repeat}
/* 土台の画面の面。TARGETLET の面（.setcard）と同じ縁取りで、丸い印と英字の飾りは付けない */
.pcard{position:relative; padding:22px 26px; border:1px solid var(--panel-line); border-radius:6px; box-shadow:var(--panel-shadow);
  background:linear-gradient(var(--acc),var(--acc)) left 0 top 18px/3px 44px no-repeat, linear-gradient(var(--hot),var(--hot)) left bottom/3px 30px no-repeat,
    linear-gradient(var(--hot),var(--hot)) left bottom/30px 3px no-repeat, var(--panel)}
.pagehead{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin:0 0 18px}
.pagehead h2{margin:0; font-size:calc(26px * var(--proj,1)); letter-spacing:.02em; color:var(--ink)}
.pagehead .grow{flex:1 1 auto}
.muted{color:var(--ink-soft); font-size:14px}
.bigbtn{font-size:18px; padding:14px 28px}
.field{display:block; margin:0 0 14px}
.field > span{display:block; font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:5px; letter-spacing:.04em}
.input{width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--paper-2); border:1.5px solid var(--rule-strong); border-radius:6px; padding:9px 11px}
.input:focus-visible{outline:3px solid var(--glow-soft); border-color:var(--acc)}
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); opacity:0; pointer-events:none; z-index:200; max-width:min(92vw,560px);
  background:var(--ink,#16181d); color:var(--paper-2,#fff); padding:11px 18px; border-radius:999px; font-size:15px; font-weight:600; transition:opacity .18s, transform .18s}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.bad{background:var(--red,#c8321e); color:#fff}
.tr-hide{display:none !important}

/* ── ログイン ── */
.logincard{max-width:520px; margin:6vh auto 0; padding:34px 34px 30px}
.logincard h2{margin:0 0 10px; font-size:26px}
.logincard p{margin:8px 0}
.loginacts{display:flex; flex-direction:column; gap:12px; margin:22px 0 14px}
.gbtn{display:flex; align-items:center; justify-content:center; gap:10px; font:inherit; font-size:17px; font-weight:700; padding:13px 18px; cursor:pointer;
  color:var(--ink); background:var(--paper-2); border:1.5px solid var(--rule-strong); border-radius:999px}
.gbtn:hover{border-color:var(--acc); box-shadow:0 0 0 3px var(--glow-soft)}
.gbtn:disabled{opacity:.55; cursor:default; box-shadow:none}
.gbtn .g{width:20px; height:20px; border-radius:50%; background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0); flex:none}
.loginfoot{margin-top:18px; padding-top:14px; border-top:1px solid var(--rule)}
.loginfoot a{color:var(--acc); font-weight:700}

/* ── 棚 ── */
.shelftools{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:0 0 14px}
.shelftools .input{width:auto; flex:1 1 220px; max-width:360px}
.shelftools select.input{flex:0 0 auto; max-width:none}
.tagbar{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px}
.tagbar .chip{font-size:13px; padding:4px 14px}
.shelf{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:26px 20px; margin:0 0 10px; padding:0 4px}
.book{position:relative; display:flex; flex-direction:column; min-height:214px; padding:16px 14px 12px 22px; text-align:left; cursor:pointer;
  color:var(--ink); background:var(--paper-2); border:1px solid var(--panel-line); border-radius:4px 10px 10px 4px;
  box-shadow:var(--card-shadow), inset 9px 0 0 var(--spine,var(--acc)); transition:transform .14s, box-shadow .14s; font:inherit}
.book:hover,.book:focus-visible{transform:translateY(-4px); box-shadow:var(--card-shadow-hover), inset 9px 0 0 var(--spine,var(--acc)); outline:none}
.book::after{content:""; position:absolute; left:-4px; right:-4px; bottom:-13px; height:9px; border-radius:2px; background:var(--paper-3); box-shadow:0 2px 0 var(--rule-strong)}
.book .bt{font-size:18px; font-weight:800; line-height:1.35; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.book .bn{margin-top:8px; font-size:13px; font-weight:700; color:var(--ink-soft)}
.book .btags{display:flex; flex-wrap:wrap; gap:4px; margin-top:8px}
.book .btag,.pill{font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; color:var(--acc); border:1px solid var(--chip-line); background:var(--chip-bg)}
.book .bfoot{margin-top:auto; padding-top:10px; font-size:11.5px; color:var(--ink-soft)}
.book .bpin{position:absolute; left:26px; top:-7px; width:14px; height:22px; background:var(--hot); clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}
.book .bsample{align-self:flex-start; margin:0 0 6px; font-size:11px; font-weight:800; color:#fff; background:var(--hot); padding:1px 9px; border-radius:999px}
.book .bmenu{position:absolute; right:6px; top:6px; width:30px; height:30px; border:0; border-radius:50%; background:transparent; color:var(--ink-soft); font-size:20px; line-height:1; cursor:pointer}
.book .bmenu:hover,.book .bmenu:focus-visible{background:var(--paper-3); color:var(--ink); outline:none}
.book.landed{animation:bookLand .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes bookLand{0%{transform:translateY(-46px) rotate(-3deg); opacity:0} 70%{transform:translateY(3px)} 100%{transform:none; opacity:1}}
:root[data-calm="1"] .book.landed{animation:none}
@media (prefers-reduced-motion:reduce){.book.landed{animation:none}}
.menu{position:absolute; z-index:60; min-width:190px; padding:6px; background:var(--paper-2); border:1px solid var(--panel-line); border-radius:10px; box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.menu button{display:block; width:100%; text-align:left; font:inherit; font-size:15px; padding:8px 12px; border:0; border-radius:6px; background:transparent; color:var(--ink); cursor:pointer}
.menu button:hover,.menu button:focus-visible{background:var(--paper-3); outline:none}
.menu button.danger{color:var(--red)}
.shelffoot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:26px}
.shelffoot a,.linkbtn{color:var(--acc); font-weight:700; background:none; border:0; font:inherit; cursor:pointer; text-decoration:underline; padding:0}
.emptybox{padding:40px 20px; text-align:center}
.trashrow{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 0; border-top:1px solid var(--rule)}
.trashrow b{flex:1 1 200px; overflow-wrap:anywhere}
dialog.dlg{border:1px solid var(--panel-line); border-radius:12px; padding:22px 24px; width:min(92vw,460px); color:var(--ink); background:var(--paper-2); box-shadow:0 30px 70px -20px rgba(0,0,0,.5)}
dialog.dlg::backdrop{background:rgba(10,20,40,.45)}
dialog.dlg h3{margin:0 0 14px; font-size:19px}
.dlgacts{display:flex; gap:10px; justify-content:flex-end; margin-top:16px}
.tagedit{display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:7px; border:1.5px solid var(--rule-strong); border-radius:6px; background:var(--paper-2)}
.tagedit input{flex:1 1 120px; min-width:100px; border:0; outline:0; font:inherit; font-size:15px; background:transparent; color:var(--ink)}
.tagedit .pill button{border:0; background:none; color:inherit; cursor:pointer; padding:0 0 0 4px; font:inherit}

/* ── はじめての案内（光らせる） ── */
.guide-ring{position:fixed; z-index:300; border-radius:14px; pointer-events:none; box-shadow:0 0 0 4px var(--gold), 0 0 0 9999px rgba(8,16,34,.62); transition:all .25s ease}
.guide-tip{position:fixed; z-index:301; width:min(88vw,330px); padding:16px 18px; border-radius:12px; background:var(--paper-2); color:var(--ink); border:1px solid var(--panel-line); box-shadow:0 24px 60px -20px rgba(0,0,0,.55)}
.guide-tip h4{margin:0 0 6px; font-size:18px}
.guide-tip p{margin:0 0 12px; font-size:15px; line-height:1.7}
.guide-tip .row{display:flex; align-items:center; gap:10px}
.guide-tip .row .grow{flex:1; font-size:12px; color:var(--ink-soft)}
:root[data-calm="1"] .guide-ring{transition:none}

/* ── 作成（取り込みの画面の右に、登録の箱を追いかけさせる） ── */
.savepanel{position:fixed; z-index:80; right:max(14px, calc(50vw - 650px)); top:92px; width:262px; padding:16px 16px 14px;
  background:#fffdf8; color:#16181d; border:1.5px solid #16181d; box-shadow:5px 5px 0 #16181d; font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif}
.savepanel h3{margin:0 0 10px; font-size:16px}
.savepanel .field > span{color:#5e6470}
.savepanel .input{background:#fff; color:#16181d; border:1.5px solid #16181d; border-radius:0; box-sizing:border-box}
.savepanel .tagedit{background:#fff; border:1.5px solid #16181d; border-radius:0}
.savepanel .tagedit input{color:#16181d}
.savepanel .pill{color:#1f4e8c; border-color:#1f4e8c; background:#eef3fa}
.savepanel .note{font-size:13px; line-height:1.6; margin:8px 0 10px; color:#5e6470}
.savepanel .note.warn{color:#c8321e; font-weight:700}
.savepanel .acts{display:flex; flex-direction:column; gap:8px}
.savepanel .go{font:inherit; font-size:17px; font-weight:800; padding:11px 10px; cursor:pointer; color:#fff; background:#1f4e8c; border:1.5px solid #16181d}
.savepanel .go:disabled{opacity:.45; cursor:default}
.savepanel .sub{font:inherit; font-size:14px; font-weight:700; padding:8px 10px; cursor:pointer; color:#16181d; background:#fff; border:1.5px solid #16181d; text-align:center; text-decoration:none}
body.with-panel main{padding-right:290px}
@media (max-width:1040px){
  body.with-panel main{padding-right:0; padding-bottom:230px}
  .savepanel{left:0; right:0; top:auto; bottom:0; width:auto; box-shadow:0 -4px 0 #16181d; border-width:1.5px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:0 12px; padding:12px 14px}
  .savepanel h3,.savepanel .note{grid-column:1 / -1; margin:0 0 6px}
  .savepanel .acts{grid-column:1 / -1; flex-direction:row}
  .savepanel .acts > *{flex:1}
  .savepanel .field{margin:0 0 8px}
}

/* ── 設定 ── */
.setsec{margin:0 0 18px}
.setsec h3{margin:0 0 12px; font-size:18px}
.setrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:9px 0; border-top:1px solid var(--rule)}
.setrow:first-of-type{border-top:0}
.setrow > .lbl{flex:0 0 190px; font-weight:700; font-size:14.5px}
.setrow > .val{flex:1 1 260px; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.setrow .input{max-width:320px}
.danger-btn{font:inherit; font-weight:800; padding:9px 18px; border-radius:999px; border:1.5px solid var(--red); color:var(--red); background:transparent; cursor:pointer}
.danger-btn:disabled{opacity:.45; cursor:default}

/* ── トップ ── */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center; margin:10px 0 34px}
.hero h2{margin:0 0 14px; font-size:clamp(28px,3.9vw,44px); line-height:1.25; letter-spacing:.01em; text-wrap:balance; line-break:strict}
.hero h2 span{display:block; white-space:nowrap}
.hero h2 span + span{color:var(--acc)}
@media (max-width:420px){.hero h2 span{white-space:normal}}
.hero p.lead{font-size:18px; line-height:1.8; margin:0 0 20px}
.hero .cta{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px}
.hero .free{display:inline-block; font-weight:800; color:#fff; background:var(--hot); padding:3px 12px; border-radius:999px; margin-right:8px}
.hero img,.shots img{display:block; width:100%; height:auto; border:1px solid var(--panel-line); border-radius:10px; box-shadow:var(--panel-shadow)}
.feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin:0 0 30px}
.feat{padding:20px 22px 22px 26px}
.feat h3{margin:0 0 6px; font-size:19px}
.feat p{margin:0; line-height:1.75; font-size:15px}
.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:0 0 30px}
.shots figure{margin:0}
.shots figcaption{font-size:13px; font-weight:700; color:var(--ink-soft); margin-top:6px}
.howlist{counter-reset:h; list-style:none; padding:0; margin:0 0 30px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.howlist li{counter-increment:h; padding:18px 20px 18px 62px; position:relative; font-weight:700; line-height:1.6}
.howlist li::before{content:counter(h); position:absolute; left:18px; top:16px; width:32px; height:32px; border-radius:50%; background:var(--acc); color:var(--on-acc); display:grid; place-items:center; font-weight:800}
@media (max-width:820px){.hero{grid-template-columns:1fr}}

/* ── 本の中身を直す ── */
.editmain{padding-right:250px}
.editmeta{display:grid; grid-template-columns:1fr 1fr; gap:0 22px; margin:0 0 16px}
.edittable{display:grid; gap:6px}
.erow{display:grid; grid-template-columns:38px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 34px; gap:8px; align-items:center}
.erow.ehead{font-size:12.5px; font-weight:800; color:var(--ink-soft); letter-spacing:.05em; padding:0 2px 2px}
.erow .eno{font-size:12.5px; color:var(--ink-soft); text-align:right; font-variant-numeric:tabular-nums}
.erow .input{padding:7px 9px; font-size:15px}
.erow .input.bad{border-color:var(--red); background:color-mix(in srgb, var(--red) 6%, var(--paper-2))}
.erow .eanswer{font-weight:700}
.erow .edel{width:30px; height:30px; border:0; border-radius:50%; background:transparent; color:var(--ink-soft); font-size:18px; cursor:pointer}
.erow .edel:hover,.erow .edel:focus-visible{background:var(--red); color:#fff; outline:none}
.sidepanel{position:fixed; z-index:80; right:max(14px, calc(50vw - 640px)); top:118px; width:220px; display:flex; flex-direction:column; gap:10px; padding:16px;
  background:var(--paper-2); border:1px solid var(--panel-line); border-radius:10px; box-shadow:var(--panel-shadow)}
.sidepanel .btn{text-align:center}
.sidepanel .muted{margin:0}
.sidepanel .muted.warn{color:var(--red); font-weight:700}
.sidepanel .small{font-size:12px; line-height:1.6}
@media (max-width:1040px){
  .editmain{padding-right:0; padding-bottom:150px}
  .editmeta{grid-template-columns:1fr}
  .sidepanel{left:0; right:0; top:auto; bottom:0; width:auto; flex-direction:row; flex-wrap:wrap; align-items:center; border-radius:0; border-width:1px 0 0}
  .sidepanel .muted{flex:1 1 100%}
  .sidepanel .small{display:none}
  .sidepanel .btn{flex:1}
  .erow{grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) 30px}
  .erow .ealts,.erow.ehead span:nth-child(4){display:none}
}

/* ── 生徒に配る・申請 ── */
dialog.dlg:has(.sharebox){width:min(92vw,600px)}
.sharebox{display:grid;gap:12px;min-width:0}
.sharebox .dlgacts{flex-wrap:wrap}
.sharebox h3{margin:0}
.sharerow{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.sharerow .lbl{grid-column:1 / -1}
.sharerow .lbl{font-size:13px;color:var(--ink-3,#666)}
.sharecode{min-width:0;font-family:ui-monospace,Menlo,monospace;font-size:16px;letter-spacing:.06em;padding:8px 10px;border:1px solid var(--rule,#ccc);background:var(--paper-2,transparent);overflow-wrap:anywhere;user-select:all}
#shareCode{font-size:26px;font-weight:800;letter-spacing:.18em}
.book .bshared,.book .bblocked{align-self:flex-start;margin:6px 0 0;font-size:11px;font-weight:800;padding:1px 9px;border:1px solid currentColor;border-radius:999px}
.bblocked{color:#b3261e}
.vow{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;margin:10px 0;line-height:1.6;cursor:pointer}
.vow input{width:20px;height:20px;margin-top:3px}
.okline{font-weight:700}
.codeform{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule,#ccc)}
.codeform label{font-size:14px;font-weight:700}
.codeform .input{width:11em;font-family:ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
.warnline{color:#b3261e;font-size:14px;flex-basis:100%}

/* ── トップページの見本への入口 ── */
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.trybtn{text-decoration:none;display:inline-flex;align-items:center;gap:.5em}
.trynote{margin:10px 0 0;font-size:14px;font-weight:700}

/* hidden を付けた物は必ず隠す（.btn や .chip の display が hidden に勝って、隠したはずの物が見えていた事がある） */
[hidden]{display:none !important}

/* ── グループ・配っている物・この端末で開いた本 ── */
.groupbar{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:10px 0 2px}
.groupbar .cfgl{font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--ink-soft); margin-right:4px}
.groupbar .gshared{border-color:var(--hot,#E3142D)}
.groupbar .gadd{border-style:dashed}
.gtools{display:inline-flex; gap:12px; margin-left:10px; flex-wrap:wrap}
.book .bnoshare{align-self:flex-start; margin:6px 0 0; font-size:11px; font-weight:800; padding:1px 9px; border:1px dashed currentColor; border-radius:999px; color:var(--ink-soft)}
.shareqr{justify-self:center; width:min(240px,60vw); padding:10px; background:#fff; border:1px solid var(--panel-line,#ccd)}
.shareqr svg{display:block; width:100%; height:auto}
#sharesBox .trashrow{grid-template-columns:1fr auto}
.recent{margin-top:16px; display:grid; gap:8px; justify-items:start}
.recent h3{margin:0; font-size:14px}
.recentrow{display:flex; gap:8px; align-items:center}
a.book{display:flex; flex-direction:column; text-decoration:none; color:inherit}
/* 規約への同意・規約の文 */
.agreelinks a{font-weight:800; margin-right:1.2em}
.footlinks a{color:inherit}
.legaldoc{max-width:820px; margin:0 auto; line-height:1.9}
.legaldoc h1{font-size:26px; margin:6px 0 10px} .legaldoc h2{font-size:19px; margin:30px 0 8px; padding-top:12px; border-top:1px solid var(--panel-line,#ccd)} .legaldoc h3{font-size:16px; margin:20px 0 6px}
.legaldoc table{border-collapse:collapse; width:100%; margin:10px 0; font-size:14.5px} .legaldoc th,.legaldoc td{border:1px solid var(--panel-line,#ccd); padding:6px 9px; text-align:left; vertical-align:top}
.legaldoc blockquote{margin:10px 0; padding:10px 14px; border-left:6px solid var(--hot,#E3142D); background:var(--paper-2,#fff); font-size:14.5px}
.legaldoc li{margin:3px 0}

/* 採点の決まり（厳密／別解候補許容）: 編集の画面の切り替えと、棚の札 */
.gradingpick{display:flex; gap:8px; flex-wrap:wrap}
.gradingpick .chip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.book .blenient{align-self:flex-start; margin:6px 0 0; font-size:11px; font-weight:800; padding:1px 9px; border:1px solid currentColor; border-radius:999px; color:var(--ink-soft)}