/* UX round 2: wizard office list (F5), radio focus (F4), month card message (F2), first-month outlook (F7),
   rule targets in the ほめる / しかる dialogs (F8). Loaded last. */

/* ---------------- はじめてガイド (F6): the spot jumps to its target (no sliding through other areas) ---------------- */
.tour-spot { transition: none; }

/* ---------------- wizard ---------------- */
.wizard [role="radio"]:focus-visible { outline: 3px solid #E88F00; outline-offset: 2px; }
.wizard .offices { max-height: 300px; }
.wizard .offices tr[role="radio"]:hover td { background: #FFF9EC; }
.wizard .offices tr.selrow td { background: #FFF3D6; }
.wizard .offices td.mark { width: 28px; text-align: center; color: #E88F00; }
.wizard .offices td.neg { color: var(--c-warn); font-weight: 700; }
.rec-tag { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: #E88F00; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; vertical-align: 1px; }
.office-note { margin: 4px 0 6px; font-size: 13px; }
.office-link { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #fff; font-size: 13px; line-height: 1.5; }
.office-link > span { flex: 1; }
.office-link .btn.small { flex: none; }

/* ---------------- month card (F2): wider text, no inner scrolling, 「続きを読む」 when clamped ---------------- */
.monthcard .thumb { width: 100px; }
.monthcard .topicarea { left: 114px; width: 250px; }
.monthcard .topicarea .tag { margin-bottom: 4px; }
.monthcard .topicarea .text { overflow: hidden; font-size: 14px; line-height: 1.5; padding: 6px 10px; }
.monthcard .topicarea .text.clamped { -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent); mask-image: linear-gradient(#000 calc(100% - 26px), transparent); }
.monthcard .topicarea .ymline { font-size: 13px; }
.more-btn { position: absolute; right: 6px; bottom: 4px; border: 0; border-radius: 999px; background: var(--c-accent); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 10px; cursor: pointer; }
.more-btn:hover, .more-btn:focus-visible { background: #E88F00; }

/* ---------------- first month (F7): outlook instead of an empty chart ---------------- */
.minigraph.fm-mode { padding: 6px 12px; display: flex; }
.fm { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 100%; font-size: 13px; color: var(--c-text); }
.fm-row { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.fm-h { flex: none; width: 112px; font-weight: 900; color: var(--c-teal-700); }
.fm-eq b, .fm-m b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--c-teal-800); }
.fm-eq .fm-profit { font-size: 16px; color: #A05C00; }
.fm-eq .fm-profit.neg, .fm-m.low b { color: var(--c-warn); }
.fm-path { display: flex; align-items: baseline; gap: 6px; }
.fm-arrow { color: var(--c-teal-600); font-weight: 900; }
.fm-note { font-size: 12px; color: #456; white-space: normal; line-height: 1.4; }

/* ---------------- ほめる / しかる (F8): who each rule picks now ---------------- */
.choice .rule { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.rule-who { font-size: 13px; font-weight: 400; color: #345; }
.rule-who b { font-weight: 900; color: var(--c-teal-800); }
.rule-who.random { color: #678; }

/* bottom bar label: short form in the portrait layout so it never wraps */
.autoquiz { white-space: nowrap; }
.autoquiz .aq-short { display: none; }
.portrait .autoquiz .aq-long { display: none; }
.portrait .autoquiz .aq-short { display: inline; }