/* 開荒數據 panel — uses the tokens defined in styles.css */
#opening-tabs { margin-bottom: 22px }
.op-section { margin: 0 0 36px }
.op-section > h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 6px }
.op-lead { margin: 0 0 16px; max-width: 70ch }
.op-subhead { font-size: 14px; margin: 24px 0 10px }
.op-chips { margin-bottom: 14px }
.op-table { margin: 0 0 12px }
.op-table td { font-variant-numeric: tabular-nums }

.op-insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 36px }
.op-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; min-width: 0 }
.op-card-tag { font-size: 11px; letter-spacing: .12em; color: #945324; margin: 0 0 8px }
.op-card h4 { font-family: var(--serif); font-size: 18px; line-height: 1.45; margin: 0 0 10px }
.op-card p:last-child { font-size: 13px; line-height: 1.85; color: var(--ink-soft); margin: 0 }

.op-bars { display: grid; gap: 8px; max-width: 640px }
.op-bar { display: grid; grid-template-columns: 48px 1fr 64px; align-items: center; gap: 12px; font-size: 13px }
.op-bar-track { height: 12px; background: #e6e8dc; border-radius: 6px; overflow: hidden }
.op-bar-fill { display: block; height: 100%; background: #7d907a; border-radius: 6px }
.op-bar-fill.is-key { background: var(--gold) }
.op-bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft) }

.op-level { background: none; border: 1px solid #cbd1c0; border-radius: 4px; padding: 4px 9px; font-weight: 650; color: var(--ink); cursor: pointer }
.op-level[aria-current=true] { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.op-match-row { display: flex; gap: 6px; flex-wrap: nowrap }
.op-match { display: inline-flex; gap: 4px; align-items: baseline; padding: 2px 7px; border-radius: 4px; background: #f1f2ea; font-size: 11px; white-space: nowrap; opacity: .62 }
.op-match.is-picked { opacity: 1; background: #e8eadc; outline: 1px solid #b9c0a8 }
.op-match b { font-size: 12px }
.op-match .good { color: #3f6b3c }
.op-match .bad { color: var(--red) }

.op-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 640px }
.op-stat { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 2px }
.op-stat span, .op-stat small { font-size: 11px; color: var(--muted) }
.op-stat strong { font-family: var(--serif); font-size: 24px; font-variant-numeric: tabular-nums }

.op-lineups { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px }
.op-lineup { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 5px; min-width: 0 }
.op-lineup-id { font-size: 10px; color: var(--muted); letter-spacing: .06em }
.op-lineup-hero { display: grid; grid-template-columns: auto auto 1fr; gap: 7px; align-items: baseline; font-size: 13px; min-width: 0 }
.op-lineup-hero small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right }
.op-troop { font-size: 10px; padding: 1px 5px; border-radius: 3px; color: var(--white); background: #7d907a; white-space: nowrap }
.op-troop.t1 { background: #6a7f5a }
.op-troop.t2 { background: #8a6a43 }
.op-troop.t3 { background: #a74532 }

.op-troop-intro { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 24px; align-items: center }
.op-triangle svg { width: 100%; height: auto; color: var(--ink-soft) }
.op-tri-nodes circle { fill: var(--white); stroke: var(--ink); stroke-width: 2 }
.op-tri-text text { font-family: var(--serif); font-size: 22px; fill: var(--ink) }
.op-tri-text .op-tri-note { font-family: var(--sans); font-size: 12px; fill: #945324 }
.op-notes { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.9; color: var(--ink-soft) }
.op-troop-table td:last-child { min-width: 260px; font-size: 12px; color: var(--ink-soft) }

.op-building-desc { font-size: 13px; color: var(--ink-soft); margin: 14px 0 }
.op-time-filters .text-button { padding-bottom: 12px }
.op-time-filters input[type=datetime-local] { height: 43px; background: var(--white); border: 1px solid #cbd1c0; border-radius: 5px; padding: 8px 12px; color: var(--ink); font: inherit; font-size: 13px; max-width: 100% }

.op-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px }
.op-day { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; min-width: 0 }
.op-day header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px }
.op-day header strong { font-family: var(--serif); font-size: 17px }
.op-day header span { font-size: 12px; color: #945324 }
.op-day ul, .op-subtasks { list-style: none; margin: 0; padding: 0 }
.op-day li, .op-subtasks li { display: grid; gap: 1px; padding: 7px 0; border-top: 1px solid #ecede4; font-size: 13px }
.op-day li small, .op-subtasks li small { font-size: 11px; color: var(--muted) }

.op-goal { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 0 18px; margin-bottom: 8px }
.op-goal summary { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: baseline; padding: 14px 0; cursor: pointer }
.op-goal summary small { color: var(--muted); font-size: 11px; text-align: right }
.op-goal-index { font-size: 11px; color: #945324; letter-spacing: .08em }
.op-goal[open] { padding-bottom: 12px }
.op-goal > p { margin: 0 0 8px }
.op-subtasks li { grid-template-columns: 1fr auto; gap: 12px; align-items: baseline }
.op-subtasks li small { text-align: right }

@media (max-width: 760px) {
  .op-troop-intro { grid-template-columns: 1fr }
  .op-triangle { max-width: 280px }
  .op-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .op-goal summary { grid-template-columns: auto 1fr }
  .op-goal summary small { grid-column: 1 / -1; text-align: left }
  .op-subtasks li { grid-template-columns: 1fr }
  .op-subtasks li small { text-align: left }
  .op-insights { grid-template-columns: 1fr }
}
@media (max-width: 450px) {
  .op-section > h3 { font-size: 19px }
  .op-bar { grid-template-columns: 40px 1fr 50px; gap: 8px }
}

/* 資源試算 */
.op-calc-form { display: grid; gap: 16px; margin-bottom: 22px; }
.op-calc-inputs { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.op-calc-side { display: grid; gap: 14px; align-content: start; }
.op-calc-grid { display: grid; grid-template-columns: 62px repeat(4, minmax(0, 1fr)); gap: 6px 8px; align-items: center; background: var(--white); border: 1px solid #ececf0; border-radius: 16px; padding: 14px 16px; }
.op-calc-stock { grid-template-columns: 62px repeat(3, minmax(0, 1fr)); }
.op-calc-h { font-size: 12px; color: var(--muted); }
.op-calc-h:first-child { color: var(--ink); font-weight: 650; }
.op-calc-lv { font-size: 13px; font-weight: 650; }
.op-calc-grid input { width: 100%; min-width: 0; height: 38px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 6px 8px; font: inherit; font-size: 15px; text-align: center; background: var(--white); color: var(--ink); }
.op-calc-grid input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 55, 42, .14); }
.op-calc-form > .text-button { justify-self: start; padding: 0; }
.op-calc-rates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.op-calc-answer { margin: 6px 0 14px; }
.op-calc-answer .eyebrow { margin-bottom: 4px; }
.op-calc-answer h4 { font-family: var(--display); font-size: 26px; font-weight: 750; margin: 0 0 6px; }
.op-calc-answer p:last-child { font-size: 14px; color: var(--ink-soft); }
.op-calc-bar { grid-template-columns: 48px 1fr 170px; }
.op-calc-next { margin-top: 20px; background: var(--tint); border-radius: 16px; padding: 16px 20px; }
.op-calc-next h4 { font-size: 15px; margin: 0 0 8px; }
.op-calc-next ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.op-calc-next li span { color: var(--ink-soft); margin-left: 10px; }
@media (max-width: 760px) {
  .op-calc-inputs { grid-template-columns: 1fr; }
  .op-calc-grid { grid-template-columns: 44px repeat(4, minmax(0, 1fr)); padding: 12px; gap: 6px; }
  .op-calc-stock { grid-template-columns: 44px repeat(3, minmax(0, 1fr)); }
  .op-calc-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-calc-bar { grid-template-columns: 40px 1fr 128px; font-size: 12px; }
  .op-calc-answer h4 { font-size: 22px; }
  .op-calc-next li span { display: block; margin-left: 0; }
}
.op-calc-kicker { font-size: 13px; font-weight: 650; color: var(--accent); margin: 0 0 4px; }