/* UX round 5 (finishing pass): portrait layout for tablets / phones (J1), 表示サイズ「大きめ」 and the right column
   without an empty band (J2), number styles (J3, web/app/WORDING.md), readable sizes and WCAG AA contrast (J5).
   Loaded last. html.portrait / html.large are set by core.js fitStage(). */

/* ======================================================================================= J5: contrast tokens */
:root {
  --c-warn: #B3261E;          /* red text / white on red: 5.0:1 on the panels, 6.5:1 on white */
  --c-accent-ink: #0A7F78;    /* teal behind white text: 4.9:1 */
  --c-orange-ink: #A05C00;    /* orange text: 5.2:1 on white */
  --c-orange-bg: #B35400;     /* orange behind white text: 5.0:1 */
  --c-caption: #4F6362;       /* secondary captions: 5.9:1 on white */
}

/* J3: a negative amount is written with 「－」 (core.js man1) — not also red. Red stays for warnings and ▼. */
.neg, td.neg, .num.neg, .val.neg, .rp-kpi .val.neg, .fm-eq .fm-profit.neg, .fm-m.low b, .wizard .offices td.neg { color: inherit; }
.fl-impact .neg, .fl-effect .neg, .kd.bad, .rp-kpi .diff.down, .bn-delta.down, .bn-eff.down, .bn-staff b.down, .bn-result.down, .sc-trend.down, .sctip-trend.down { color: var(--c-warn); }
.fm-m.low { text-decoration: underline wavy var(--c-warn); text-underline-offset: 3px; }

/* white text on teal / orange / red */
.topicarea .tag, .fl-main .tag, .plate .course, .fl-tag, .more-btn, .todo-ico, .lx-tab[aria-selected="true"], .lx-table th, table.rk-table th,
.lx-ch-label, .lx-btn-primary, .login .tabs button.on, .quiz .badge { background: var(--c-accent-ink); }
.lx-btn-primary { color: #fff; }
.fl-tag.t-result, .lx-tag-ok { background: #1E7F5A; }
.lx-tag-ng { background: #6E6464; }
.fl-tag.t-settle, .tip-ideal, .actbtn .act-done, .tip-done, .sc-assign.standby, .rk-you, .rec-tag, .steps span.on, .l-warn .todo-ico,
.rp-warn .warn .ico, .lx-chbadge { background: var(--c-orange-bg); }
.fl-tag.t-quiz { background: #3F5FCC; }
.fl-tag.t-penalty, .topicarea .tag.penalty, .fl-main .tag.penalty, .ltab .dot:not(:empty), .topbar button .badge, .topbar .navbtn .badge,
.topbar .navitem .badge, .sc-new, .l-danger .todo-ico, .rp-warn .danger .ico { background: var(--c-warn); }
.btn.danger { background: #C93C3C; border-color: #C93C3C; }
.more-btn:hover, .more-btn:focus-visible { background: var(--c-orange-bg); }
.nextbtn { background: linear-gradient(#B35400, #8A4000); box-shadow: 0 4px 0 #5E2C00; }
.rp-warn .ico { background: var(--c-accent-ink); }
.term::after { background: #3A8A80; }
.lx-chbadge button { color: var(--c-orange-bg); }

/* coloured text */
.rank .r, .sc-rank { color: var(--c-orange-bg); }
.sc-rank.mD, .scard.zero .sc-num, .staffline .warn, .mh-state .warn, .acttip-off, .err, .lx-error { color: var(--c-warn); }
.stars, .yr-stars { color: #8C6000; }
.yr-stars .off { color: #C9D3D0; }
.counter.cash .val, .rp-kpi.cash .val { color: #A05200; }
.kd.good, .rp-kpi .diff.up, .bn-delta.up, .bn-eff.up, .bn-staff b.up, .bn-result.up, .sc-trend.up, .sctip-trend.up, .pos { color: #1E7F5A; }
.kd.flat, .rule-who.random, .yr-was, .counter .sub, .rank .n, .sc-lbl, .sc-foot, .sc-when, .lx-card-meta, .lx-prog-goal, .lx-cell-no,
.mh-table tr.off td, .mh-table tr.off th, .rk-date, .rk-office { color: var(--c-caption); }
.ltab .cnt, .fl-keys, .fl-hint { color: #2F5F59; }
table.grid td.sub { color: #2F6B64; }
table.grid td.none { color: #557570; }
.staffline .standby b { color: #A05200; }
.tabs2 button.on { background: var(--c-accent-ink); border-color: var(--c-accent-ink); color: #fff; }
.quiz .q { background: linear-gradient(#0E8C84, #0A7F78); }
.tabs2 button { color: var(--c-teal-700); }
.dateline { color: var(--c-teal-800); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.wizard .head h1 { color: var(--c-teal-800); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.infolog .k-month { color: var(--c-teal-800); text-shadow: none; }
.lx-sep { color: #4b5d5b; }
.board-legend .lg.zero { color: var(--c-warn); }
.login .tabs button, .login .form-row label { color: var(--c-teal-800); }

/* ======================================================================================= J5: no text below 12 px */
.lx-cell-no, .lx-cell-title, .ltab .dot:not(:empty), .topbar button .badge, .counter .sub, .yr-was, .rank .nk .kd, .sc-new, .rk-you, .kd, .fm-note,
.lx-prog-text, .sctip-foot, .tip-done, .tip-ideal, .mh-note, .bn-who, .rk-date { font-size: 12px; }
.fl-keys, .fl-hint, .rp-cn, .rp-effect, .rp-hints, .lx-card-desc, .lx-stats, .lx-muted, .acttip-once, .office-note, .office-link { font-size: 13px; }

/* ======================================================================================= J2: right column without an empty band */
.side { height: 462px; display: flex; flex-direction: column; }
.side > * { flex: none; }
.side .minigraph { flex: 1 1 auto; min-height: 104px; height: auto; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.side .lx-chbadge { position: static; width: auto; margin-top: 6px; }
.counter, .rank { cursor: help; }
.counter:focus-visible, .rank:focus-visible { outline: 3px solid var(--c-hover-exec); outline-offset: 1px; }

/* settings / confirmations */
.set-h { margin: 14px 0 2px; font-size: 17px; color: var(--c-teal-700); }
.set-size .choices { flex-direction: row; flex-wrap: wrap; }
.confirm-keys { margin-top: 2px; font-size: 13px; color: #5A4A20; }
.ret-effect { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: #FFF6DA; font-size: 15px; line-height: 1.55; }
.ret-effect b { margin-right: 4px; color: #4A3000; }
.quit-kv { margin-top: 10px; background: #fff; border-radius: 10px; padding: 8px 14px; }

/* the timeline toggle of 翌月へのまとめ exists only in the portrait layout */
.fl-ltoggle { display: none; }

/* ======================================================================================= J2: 表示サイズ「大きめ」 */
/* staff cards: 3 per row, larger text (the board scrolls) */
html.large:not(.portrait) .board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html.large:not(.portrait) .scard { font-size: 15px; gap: 4px; padding: 8px 10px; }
html.large:not(.portrait) .sc-name { font-size: 19px; }
html.large:not(.portrait) .sc-role, html.large:not(.portrait) .sc-assign, html.large:not(.portrait) .sc-tanka, html.large:not(.portrait) .sc-motv,
html.large:not(.portrait) .sc-skill, html.large:not(.portrait) .sc-foot, html.large:not(.portrait) .sc-future, html.large:not(.portrait) .sc-when { font-size: 15px; }
html.large:not(.portrait) .sc-tanka b { font-size: 17px; }
html.large:not(.portrait) .sc-rank, html.large:not(.portrait) .sc-trend { font-size: 16px; }
html.large:not(.portrait) .sc-new { font-size: 14px; }
html.large:not(.portrait) .sc-bar { height: 9px; }
html.large:not(.portrait) .todo-btn { font-size: 16px; }
html.large:not(.portrait) .staffline { font-size: 15px; }
html.large:not(.portrait) .counter .sub, html.large:not(.portrait) .kd, html.large:not(.portrait) .rank .n { font-size: 15px; }
html.large:not(.portrait) .rank .nk .kd { font-size: 15px; }
html.large:not(.portrait) .counter .lbl, html.large:not(.portrait) .rank .lbl { font-size: 15px; }
html.large:not(.portrait) .infolog { font-size: 17px; }
html.large:not(.portrait) .infolog .ym { font-size: 15px; }
html.large:not(.portrait) .ltab { font-size: 16px; }
html.large:not(.portrait) .ltab .cnt { font-size: 15px; }
html.large:not(.portrait) .board-legend .lg, html.large:not(.portrait) .board-sel, html.large:not(.portrait) .autoquiz { font-size: 15px; }
html.large:not(.portrait) .monthcard .topicarea .text { font-size: 16px; }
html.large:not(.portrait) .fm, html.large:not(.portrait) .fm-note { font-size: 15px; }
html.large:not(.portrait) .topbar .navbtn .badge, html.large:not(.portrait) .topicarea .tag, html.large:not(.portrait) .todo-more,
html.large:not(.portrait) .plate .course, html.large:not(.portrait) .counter .val small, html.large:not(.portrait) .ltab .dot:not(:empty) { font-size: 15px; }
html.large:not(.portrait) .topbar .navbtn .badge { min-width: 22px; height: 22px; line-height: 22px; border-radius: 11px; }
/* the challenge lobby and the game-over screens (no dialog, but the same reading distance) */
html.large:not(.portrait) .lx-screen, html.large:not(.portrait) .lx-setup, html.large:not(.portrait) .lx-status, html.large:not(.portrait) .lx-form label,
html.large:not(.portrait) .lx-form input, html.large:not(.portrait) .lx-ch-label, html.large:not(.portrait) .lx-count, html.large:not(.portrait) .gameover .right { font-size: 16px; }

/* dialogs (both layouts) */
html.large .modal .body { font-size: 17px; }
html.large .modal .msg, html.large .with-pic .txt, html.large .act-text, html.large .fl-text, html.large .fl-form, html.large .quiz .explain { font-size: 20px; }
html.large .modal .note, html.large .confirm-detail, html.large .ret-effect, html.large .act-cost, html.large .acttip, html.large .tip { font-size: 16px; }
html.large .confirm-text { font-size: 19px; }
html.large .confirm-keys, html.large .rule-who, html.large .fl-keys, html.large .fl-hint, html.large .fl-foot .fl-foot-hint { font-size: 15px; }
html.large .choice, html.large .modal .kv, html.large .sd-kv, html.large .fl-skip { font-size: 17px; }
html.large table.grid, html.large .lx-table, html.large table.rk-table, html.large .lx-ch-rank table.rk-table, html.large .mh-table, html.large .yr-items,
html.large .yr-due table, html.large .fl-plan-t, html.large .bn-staff { font-size: 16px; }
html.large .report, html.large .rp-explain, html.large .rp-warn li, html.large .fl-impact, html.large .fl-rules, html.large .yr-hints ol, html.large .yr-comment { font-size: 16px; }
html.large .rp-kpi .lbl, html.large .rp-kpi .diff, html.large .rp-hints, html.large .rp-cn, html.large .rp-effect, html.large .rp-cash td, html.large .yr-advice, html.large .yr-was { font-size: 15px; }
html.large .fl-entry, html.large .bn-bands, html.large .bn-who, html.large .bn-next, html.large .kdtip, html.large .kdtip-note, html.large .sctip-row, html.large .sctip-sub { font-size: 16px; }
html.large .skill { font-size: 16px; grid-template-columns: 170px 1fr 40px; }
html.large .lx-card-desc, html.large .lx-muted, html.large .lx-stats, html.large .lx-card-meta, html.large .lx-prog-text, html.large .lx-cell-title, html.large .lx-cell-no,
html.large .lx-detail-text, html.large .lx-outcome, html.large .lx-quiz-a p, html.large .rk-date, html.large .rk-cond, html.large .glossary dd { font-size: 16px; }
html.large .lx-tab, html.large .lx-tabs-sm .lx-tab { font-size: 16px; }
html.large .tour-text { font-size: 18px; }
html.large .rp-warn .ico { width: 24px; height: 24px; line-height: 24px; font-size: 15px; }
html.large .yr-cash, html.large .lx-count, html.large .modal .btn.small, html.large .rp-kpi .val small, html.large .lx-ch-label, html.large .lx-tag, html.large .rk-you { font-size: 15px; }

/* ======================================================================================= J1: portrait layout */
html.portrait, html.portrait body { height: auto; min-height: 100%; overflow: auto; overflow-x: hidden; }
html.portrait body { background: var(--c-bg); }
html.portrait #viewport { position: static; }
html.portrait #stage {
  position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 100vh; overflow: visible; transform: none !important;
  background: var(--c-bg); font-size: 15px;
}
html.portrait #screen { position: static; }
html.portrait #overlay { position: fixed; inset: 0; z-index: 50; }
html.portrait #toast { position: fixed; top: 10px; min-width: 0; width: calc(100% - 24px); max-width: 560px; z-index: 300; padding: 10px 16px; }
html.portrait .tip { max-width: calc(100vw - 16px); z-index: 260; }
html.portrait .btn { height: 44px; min-width: 0; }
html.portrait .btn.small { height: 44px; font-size: 15px; }
html.portrait input[type=text], html.portrait input[type=password], html.portrait input[type=number], html.portrait select { min-height: 44px; font-size: 16px; }
html.portrait .choice { min-height: 44px; }
html.portrait .link { min-height: 44px; }
html.portrait .term { padding: 2px 0; }

/* ---------------- main screen: one scrolling column ---------------- */
html.portrait #screen:has(> .topbar) { display: flex; flex-direction: column; gap: 10px; padding: 0 12px calc(84px + env(safe-area-inset-bottom)); }
html.portrait #screen > .topbar, html.portrait #screen > .monthcard, html.portrait #screen > .todo, html.portrait #screen > .lower,
html.portrait #screen > .side, html.portrait #screen > .actions { position: relative; left: auto; top: auto; width: auto; height: auto; }
html.portrait #screen > .topbar { order: 1; }
html.portrait #screen > .side { order: 2; }
html.portrait #screen > .monthcard { order: 3; }
html.portrait #screen > .todo { order: 4; }
html.portrait #screen > .lower { order: 5; }
html.portrait #screen > .actions { order: 6; }

/* top navigation: buttons in a grid, 44 px */
html.portrait .topbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 6px; padding: 8px 0 0; z-index: 15; }
html.portrait .topbar .navfill { display: none; }
html.portrait .topbar .navgroup { min-width: 0; }
html.portrait .topbar .navbtn { width: 100%; min-width: 0; height: 44px; padding: 0 8px; border-radius: 10px; border-top: 1px solid #A8DDD7; box-shadow: 0 3px 0 #5FA79E; font-size: 15px; }
html.portrait .navmenu { top: 50px; min-width: 220px; }
html.portrait .topbar .navitem { height: 44px; font-size: 16px; }

/* header: company, month, KPIs */
html.portrait .side { height: auto; gap: 6px; }
html.portrait .plate { height: auto; min-height: 48px; background: rgba(255, 255, 255, .9); border-radius: 10px; padding: 6px 12px; gap: 8px; }
html.portrait .plate .name { font-size: 20px; max-width: none; flex: 1; min-width: 0; }
html.portrait .plate .course { margin-right: 0; }
html.portrait .dateline { margin: 0; font-size: 18px; }
html.portrait .dateline img { width: 26px; }
html.portrait .counters { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
html.portrait .counter { padding: 6px 8px; min-height: 44px; }
html.portrait .counter .val { font-size: 24px; }
html.portrait .ranks { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); margin-top: 0; }
html.portrait .rank { min-height: 44px; padding: 4px 8px; gap: 4px; }
html.portrait .rank .lbl { font-size: 14px; }
html.portrait .staffline { margin-top: 0; font-size: 14px; }
html.portrait .side .minigraph { margin-top: 0; min-height: 0; padding: 4px; }
html.portrait .side .minigraph svg { width: 100%; height: auto; }
html.portrait .minigraph.fm-mode { padding: 8px 12px; }
html.portrait .fm-row { flex-wrap: wrap; white-space: normal; }
html.portrait .fm-path { flex-wrap: wrap; }

@media (max-width: 599px) {
  html.portrait .counters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  html.portrait .counter { padding: 4px 4px; }
  html.portrait .counter .val { font-size: 19px; }
  html.portrait .counter .val small { font-size: 12px; }
  html.portrait .counter .lbl { font-size: 13px; }
  html.portrait .counter .sub { flex-wrap: wrap; white-space: normal; gap: 0 4px; }
  html.portrait .ranks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  html.portrait .rank { flex-wrap: wrap; justify-content: center; text-align: center; column-gap: 6px; row-gap: 0; }
  html.portrait .rank .lbl { flex: 1 1 100%; }
  html.portrait .rank .nk { align-items: flex-start; }
  html.portrait .stars { font-size: 17px; }
}

/* month card */
html.portrait .monthcard { display: flex; gap: 10px; padding: 8px; }
html.portrait .monthcard .thumb { position: relative; left: auto; top: auto; width: 88px; height: 118px; flex: none; }
html.portrait .monthcard .topicarea { position: relative; left: auto; top: auto; width: auto; height: auto; flex: 1; min-width: 0; }
html.portrait .monthcard .topicarea .text { overflow: visible; font-size: 15px; }
html.portrait .more-btn { position: static; align-self: flex-end; margin-top: 6px; min-height: 44px; padding: 0 16px; font-size: 14px; }

/* 今月やること */
html.portrait .todo { height: auto; max-height: none; padding: 8px 10px; z-index: auto; }
html.portrait .todo.expanded { box-shadow: none; }
html.portrait .todo-head { height: auto; min-height: 28px; }
html.portrait .todo-title { font-size: 17px; }
html.portrait .todo-list { overflow: visible; gap: 4px; }
html.portrait .todo-btn { height: auto; min-height: 44px; padding: 6px 10px; font-size: 15px; line-height: 1.45; }
html.portrait .todo-text { white-space: normal; }
html.portrait .todo-more { min-height: 44px; font-size: 15px; }

/* staff board (2 cards per row; 3 on wider screens) and お知らせ */
html.portrait .lower { display: block; }
html.portrait .lowertabs { height: auto; flex-wrap: wrap; align-items: stretch; gap: 6px; }
html.portrait .ltab { height: 44px; font-size: 15px; }
html.portrait .lowerfill { display: none; }
html.portrait .board-legend { order: 3; width: auto; padding: 0; align-items: center; }
html.portrait .board-filters { order: 4; flex: 1 1 100%; padding: 0 0 6px; }
html.portrait .board-sel { height: 44px; flex: 1; font-size: 15px; }
html.portrait .lower .board { overflow: visible; border-radius: 8px; padding: 8px; }
html.portrait .lower .infolog { position: static; max-height: 70vh; border-radius: 8px; }
html.portrait .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { html.portrait .board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html.portrait .scard { font-size: 14px; padding: 8px 9px; gap: 4px; min-height: 44px; }
html.portrait .sc-name { font-size: 16px; }
html.portrait .sc-role, html.portrait .sc-assign, html.portrait .sc-tanka, html.portrait .sc-motv, html.portrait .sc-skill, html.portrait .sc-foot,
html.portrait .sc-future, html.portrait .sc-when { font-size: 13px; }
html.portrait .sc-tanka b { font-size: 15px; }
html.portrait .sc-new { font-size: 12px; }
html.portrait .sc-skill { flex-wrap: wrap; white-space: normal; gap: 2px 8px; }
html.portrait .sc-foot { flex-wrap: wrap; }

/* actions + sticky bottom bar with 「翌月へ」 */
html.portrait .actiongrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; justify-content: stretch; }
html.portrait .actbtn { width: 100%; height: 48px; background-size: auto 100%; background-position: left center; background-color: #fff; border-radius: 10px; box-shadow: 0 2px 0 rgba(32, 88, 80, .25); }
html.portrait .actbtn .act-lbl { left: 56px; font-size: 16px; }
html.portrait .actbtn .act-done { width: 24px; height: 24px; line-height: 24px; }
html.portrait .nextrow {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; background: rgba(194, 232, 228, .97); box-shadow: 0 -4px 14px rgba(0, 0, 0, .18);
}
html.portrait .autoquiz { min-height: 44px; font-size: 14px; flex: none; max-width: 40%; }
html.portrait .nextbtn { flex: 1; width: auto; max-width: 420px; height: 52px; margin-left: auto; font-size: 21px; }

/* ---------------- dialogs: full-width sheets that scroll ---------------- */
html.portrait .modal-back { align-items: flex-end; }
html.portrait .modal, html.portrait .modal.big, html.portrait .modal.mid, html.portrait .modal.small, html.portrait .modal.lx-modal,
html.portrait .modal.flowpanel, html.portrait .modal.bonusdlg {
  width: 100%; max-width: 100%; height: auto; max-height: calc(100vh - 8px); max-height: calc(100dvh - 8px);
  border-radius: 14px 14px 0 0; padding: 14px 14px calc(12px + env(safe-area-inset-bottom));
}
html.portrait .modal.big, html.portrait .modal.lx-modal, html.portrait .modal.flowpanel { height: calc(100vh - 8px); height: calc(100dvh - 8px); }
html.portrait .modal h2 { font-size: 20px; margin-bottom: 8px; }
html.portrait .modal .body { overflow: auto; overscroll-behavior: contain; }
html.portrait .modal.bonusdlg .body { overflow: auto; }
html.portrait .modal .buttons { flex-wrap: wrap; gap: 8px; margin-top: 10px; }
html.portrait .modal .buttons .btn { flex: 1 1 140px; }
html.portrait .with-pic { flex-direction: column; gap: 10px; align-items: stretch; }
html.portrait .with-pic .pic, html.portrait .modal.actdlg .with-pic .pic, html.portrait .bn.with-pic .pic { width: 100%; height: 150px; }
html.portrait .with-pic .txt { font-size: 16px; }
html.portrait .msg, html.portrait .act-text { font-size: 16px; }
html.portrait .cols { flex-direction: column; gap: 12px; }
html.portrait .cols > * { flex: none !important; max-height: none !important; }
html.portrait .cards, html.portrait .course { flex-direction: column; }
html.portrait .genres { grid-template-columns: 1fr; }
html.portrait .travel-opts { grid-template-columns: repeat(2, 1fr); }
html.portrait .staffdetail .sd { grid-template-columns: 1fr; gap: 10px; }
html.portrait .sd-row { grid-template-columns: 1fr; gap: 4px; }
html.portrait .sd-acts .btn, html.portrait .sd-row > .btn { min-height: 44px; }
html.portrait .skill { grid-template-columns: 112px 1fr 30px; }
html.portrait .form-row { flex-wrap: wrap; gap: 6px 10px; }
html.portrait .form-row label { width: 100%; }
html.portrait .kv { font-size: 15px; }
html.portrait .confirm-step { flex-direction: column; align-items: stretch; gap: 10px; }
html.portrait .confirm-btns { width: 100%; }
html.portrait .confirm-btns .btn { flex: 1; min-width: 0; }
html.portrait .tscroll, html.portrait .chartbox, html.portrait .offices { overflow-x: auto; max-width: 100%; }
html.portrait .chartbox svg { width: 100%; height: auto; }
html.portrait .yscores { grid-template-columns: 1fr !important; }
html.portrait .rp-kpis, html.portrait .yearreview .rp-kpis.yr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.portrait .rp-cols, html.portrait .yearreview .rp-cols { grid-template-columns: 1fr; }
html.portrait .rp-kpi .val { font-size: 22px; }
html.portrait .rp-sec { overflow-x: auto; }
html.portrait .yr-items td, html.portrait .yr-items th { padding: 3px 4px; }
html.portrait .rp-bar { flex-wrap: wrap; gap: 6px; }
html.portrait .glossary { columns: 1; }
html.portrait .quiz, html.portrait .fl-quiz .quiz { width: 100%; height: auto; flex-direction: column; }
html.portrait .quiz .side { position: static; width: auto; flex-direction: row; justify-content: center; padding: 10px; gap: 12px; }
html.portrait .quiz .q { width: 56px; height: 56px; font-size: 30px; }
html.portrait .quiz .mainq { padding: 14px; }
html.portrait .quiz .question { font-size: 17px; }
html.portrait .quiz .ox button { width: 92px; height: 92px; font-size: 50px; }
html.portrait .mh-table { font-size: 13px; }
html.portrait .bn-bands { grid-template-columns: 1fr; }
html.portrait .set-size .choices { flex-direction: column; }
html.portrait .lx-unlock-card { min-width: 0; width: calc(100% - 24px); }

/* 翌月へのまとめ: the timeline is folded above the current step; the footer with the main button stays visible */
html.portrait .modal.flowpanel .body { overflow: auto; }
html.portrait .fl-body { display: flex; flex-direction: column; gap: 10px; height: auto; }
html.portrait .fl-left { padding: 4px; }
html.portrait .fl-ltitle { display: none; }
html.portrait .fl-ltoggle {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 4px 10px; border: 0; border-radius: 8px; background: #fff;
  font-family: var(--font); font-size: 14px; color: var(--c-text); text-align: left; cursor: pointer;
}
html.portrait .fl-tl-h { flex: none; font-weight: 900; color: var(--c-teal-700); }
html.portrait .fl-tcount { font-weight: 400; color: var(--c-caption); margin-left: 2px; }
html.portrait .fl-tlast { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #345; }
html.portrait .fl-tl-caret { flex: none; color: var(--c-teal-700); }
html.portrait .fl-left.open .fl-tl-caret { transform: rotate(180deg); }
html.portrait .fl-left:not(.open) .fl-list { display: none; }
html.portrait .fl-left.open .fl-list { max-height: 45vh; margin-top: 6px; }
html.portrait .fl-right { display: block; min-height: 0; }
html.portrait .fl-head { flex-wrap: wrap; }
html.portrait .fl-opts { flex-wrap: wrap; gap: 4px 14px; }
html.portrait .fl-skip { min-height: 44px; }
html.portrait .fl-keys { display: none; }
html.portrait .fl-now, html.portrait .fl-content { overflow: visible; display: block; }
html.portrait .fl-step { flex-direction: column; gap: 10px; }
html.portrait .fl-pic { width: 100%; height: 170px; }
html.portrait .fl-text { font-size: 16px; }
html.portrait .fl-penalty { display: block; }
html.portrait .fl-plan-in { grid-template-columns: 1fr; }
html.portrait .fl-borrow .form-row label, html.portrait .fl-divform .form-row label { width: 100%; }
html.portrait .fl-foot {
  position: sticky; bottom: -14px; z-index: 3; height: auto; flex-wrap: wrap; gap: 8px; margin: 8px -14px 0; padding: 8px 14px 14px;
  background: var(--c-panel); border-top: 1px solid rgba(42, 110, 102, .25);
}
html.portrait .fl-foot .fl-foot-hint { flex: 1 1 100%; margin: 0; font-size: 13px; }
html.portrait .fl-foot .btn, html.portrait .fl-foot .btn.fl-primary { flex: 1 1 140px; width: auto; min-width: 0; height: 48px; }
html.portrait .fl-report { overflow: visible; }

/* ---------------- login ---------------- */
html.portrait .login { position: relative; min-height: 100vh; min-height: 100dvh; padding: 16px 12px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; background-size: cover; background-position: center; }
html.portrait .login .title { position: static; width: 100%; max-width: 560px; height: auto; }
html.portrait .login .box { position: static; width: 100%; max-width: 560px; padding: 16px; }
html.portrait .login .tabs button { height: auto; min-height: 44px; padding: 4px 6px; font-size: 15px; }

/* ---------------- wizard ---------------- */
html.portrait .wizard { position: relative; padding: 12px 12px calc(84px + env(safe-area-inset-bottom)); }
html.portrait .wizard .head { position: static; flex-direction: column; align-items: flex-start; gap: 8px; }
html.portrait .wizard .head h1 { font-size: 24px; }
html.portrait .steps { flex-wrap: wrap; }
html.portrait .steps span { font-size: 13px; padding: 4px 10px; }
html.portrait .wizard .main { position: static; width: auto; height: auto; margin-top: 10px; padding: 14px; overflow: visible; }
html.portrait .wizard .offices { max-height: none; }
html.portrait .wizard .foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(194, 232, 228, .97); box-shadow: 0 -4px 14px rgba(0, 0, 0, .18); gap: 10px;
}
html.portrait .wizard .foot .btn { flex: 1; max-width: 260px; }
html.portrait .wizard .form-row input { flex: 1 1 120px; min-width: 0; width: auto !important; }
html.portrait .staff-table td input { width: 80px; }
html.portrait .lx-quickbar { position: static; justify-content: center; flex-wrap: wrap; padding: 0 12px calc(84px + env(safe-area-inset-bottom)); margin-top: -70px; }

/* ---------------- challenge lobby / game over ---------------- */
html.portrait .lx-screen { position: relative; inset: auto; min-height: 100vh; padding: 12px 12px 24px; }
html.portrait .lx-screen-head { flex-direction: column; align-items: flex-start; gap: 8px; }
html.portrait .lx-screen-head h1 { font-size: 22px; }
html.portrait .lx-screen-btns { flex-wrap: wrap; }
html.portrait .lx-screen-body { overflow: visible; }
html.portrait .lx-challenge { grid-template-columns: 1fr; }
html.portrait .lx-form label { grid-template-columns: 1fr; gap: 4px; }
html.portrait .lx-inline { min-width: 0; }
html.portrait .lx-inline input { width: auto; flex: 1 1 0; min-width: 0; }
html.portrait .lx-btn { min-height: 44px; }
html.portrait .lx-form input { min-height: 44px; font-size: 16px; }
html.portrait summary { padding: 11px 0; }
html.portrait .lx-cell { min-height: 112px; }
html.portrait .lx-tab { min-height: 44px; }
html.portrait .lx-book-body { grid-template-columns: 1fr; }
html.portrait .lx-book-detail { position: static; }
html.portrait .lx-next-grid { grid-template-columns: 1fr; }
html.portrait .lx-grid { grid-template-columns: 1fr; }
html.portrait .lx-result-main { flex-direction: column; align-items: flex-start; gap: 6px; }
html.portrait .gameover { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; }
html.portrait .gameover .left { position: relative; left: auto; top: auto; width: 100%; height: 220px; }
html.portrait .gameover .right { position: static; width: auto; height: auto; padding: 14px; overflow: visible; }
html.portrait .gameover h1 { font-size: 24px; }
html.portrait .go-scores { flex-wrap: wrap; }
html.portrait .rk-co { max-width: 140px; }

/* ---------------- はじめてガイド ---------------- */
html.portrait .tour-bubble { padding: 12px 14px; }
html.portrait .tour-btns .btn { min-height: 44px; }

/* ---- corporate contracts (account.js): password change, locked screen, access badge */
.login.acct .box { top: 220px; }
.acct-title { margin: 0 0 8px; font-size: 22px; color: var(--c-teal-700); }
.acct-org { margin: 0 0 4px; font-weight: 700; }
.acct-msg { margin: 0 0 12px; line-height: 1.7; }
.acct-note { margin: 0 0 12px; font-size: 14px; color: var(--c-teal-700); }
.acct-buttons { display: flex; justify-content: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.lx-acctbar { position: absolute; left: 16px; bottom: 12px; display: flex; gap: 8px; z-index: 5; max-width: 500px; }
html.portrait .lx-acctbar { position: static; justify-content: center; flex-wrap: wrap; padding: 12px 12px 0; max-width: none; }
.acct-buttons a.btn, .lx-acctbar a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.lx-access { align-self: center; font-size: 13px; font-weight: 700; color: var(--c-teal-700); background: #fff; border-radius: 999px; padding: 4px 12px; }
.lx-access.warn { color: #9a5b00; background: #fff3d6; }
html.portrait .login.acct .box { top: auto; }