/* Persistent information left, command controls right. */
#head { flex-wrap: wrap; gap: 7px 14px; }
#head .title { letter-spacing: .16em; }
#gameVersion { font: 11px var(--ledger); letter-spacing: 0; color: var(--paper-edge); }
#saveStatus { font: 10px var(--ledger); color: #c8d8b7; }
#saveStatus.warning { color: #f3bd7a; }
#intel { flex: 0 0 260px; min-height: 0; overflow-y: auto; background: var(--walnut-lit); border-right: 1px solid var(--brass); }
#aside { flex: 0 0 320px; overflow-y: auto; display: block; }
#intel section, #aside section { border-bottom: 1px solid rgba(176,141,63,.25); }
#intel h2, #aside h2 { margin: 0; padding: 11px 12px 6px; font: 11px var(--serif); letter-spacing: .15em; text-transform: uppercase; color: var(--brass-lit); }
.panel-content { padding: 3px 12px 12px; font-size: 13px; line-height: 1.45; }
.panel-content p { margin: 0 0 8px; }
.hint { color: #c5beb0; font-size: 12px; line-height: 1.5; }
#strength { color: var(--brass-lit); font: 11px/1.6 var(--ledger); }
.info-link { display: block; width: 100%; margin: 0 0 7px; padding: 8px; color: var(--paper); border: 1px solid #625947; background: #26221c; text-align: left; cursor: pointer; }
.info-link strong, .info-link span { display: block; }
.info-link strong { font-weight: normal; font-size: 13px; }
.info-link span { color: #c5beb0; font-size: 11px; margin-top: 3px; }
.info-link:hover { border-color: var(--brass-lit); }
.info-link:focus-visible, .roster-unit:focus-visible { outline: 2px solid var(--brass-lit); outline-offset: -2px; }
#force { max-height: none; overflow: visible; }
#force li { display: block; padding: 0; }
.roster-unit { display: flex; align-items: baseline; gap: 7px; width: 100%; padding: 7px 5px; border: 0; background: transparent; text-align: left; font-size: 12px; cursor: pointer; }
.roster-unit:disabled { cursor: default; }
#force li .d { overflow-wrap: anywhere; }
#force li .f { width: 32px; color: #c5beb0; }
.unit-name { color: var(--brass-lit); }
#unitDetail dl { display: grid; grid-template-columns: 1fr 1.1fr; margin: 8px 0 0; gap: 3px 10px; font-size: 12px; }
#unitDetail dt { color: #c5beb0; }
#unitDetail dd { margin: 0; text-align: right; }
.confirmation { color: #c8d8b7; margin-top: 8px !important; }
.dispatch { border-left: 2px solid var(--brass); padding-left: 8px; font-size: 12px; }
.tool-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-buttons .hint { flex-basis: 100%; margin: 2px 0 0; }
.tool-buttons .opt { min-height: 32px; }
#orders { border-top: 0; }
#orders .row .lbl { color: #c5beb0; }
#orders .opt { min-height: 30px; }
#rulingsSec { display: block; }
#rulings { max-height: none; overflow: visible; }
#rulings .none { color: #c5beb0; }
#draftNotice { border: 1px solid var(--brass-lit); padding: 9px; margin-top: 10px; font-size: 12px; line-height: 1.5; }
#draftNotice[hidden] { display: none; }
#draftNotice p { margin: 0 0 8px; }
#draftNotice .opt { margin-bottom: 4px; }
#panelNav { display: none; }
#routeTools { padding: 8px 0; border-top: 1px solid #625947; }
#routeTools[hidden] { display: none; }
#routeTools p { margin: 7px 0 0; }
#routeSummary { color: var(--brass-lit); }
#routeSummary.route-warning { color: #f2b68b; }
#journal { max-height: 240px; overflow-y: auto; }
#journal p { border-bottom: 1px solid #514633; padding-bottom: 7px; font-size: 12px; }
.draft-tag { color: var(--brass-lit); font-size: 10px; }
#saveDialog { width: min(560px, calc(100% - 30px)); max-height: 85vh; overflow: auto; border: 1px solid var(--brass); padding: 24px; background: var(--walnut); color: var(--paper); line-height: 1.5; }
#saveDialog::backdrop { background: rgba(12,10,8,.88); }
#saveDialog h2 { margin: 0 0 12px; color: var(--brass-lit); }
#saveDialog .opt { min-height: 38px; }
#saveDialog input { display: block; max-width: 100%; margin-top: 10px; color: var(--paper); }
#saveDialog label { display: block; }
#saveDialog hr { border: 0; border-top: 1px solid #625947; margin: 20px 0; }
#importStatus { color: var(--brass-lit); }
.roster-filters { padding: 2px 12px 10px; }
.roster-filters label { display: block; color: #c5beb0; font-size: 11px; margin: 5px 0; }
.roster-filters input, .roster-filters select { box-sizing: border-box; width: 100%; min-height: 32px; padding: 5px 7px; background: #26221c; color: var(--paper); border: 1px solid #625947; font: 12px var(--serif); border-radius: 0; }
.roster-filters input:focus-visible, .roster-filters select:focus-visible { outline: 2px solid var(--brass-lit); outline-offset: 1px; }
.filter-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
#rosterCount { font-size: 11px; color: #c5beb0; }
#emptyRoster { margin: 4px 12px 12px; }
#emptyRoster[hidden], #overviewContent[hidden] { display: none; }
#overviewPanel { position: absolute; right: 28px; top: 28px; z-index: 3; width: 190px; border: 1px solid var(--brass); background: var(--walnut); box-shadow: 0 3px 12px #0006; }
.overview-head { display: flex; align-items: center; justify-content: space-between; padding-left: 9px; color: var(--brass-lit); font: 11px var(--serif); letter-spacing: .05em; }
#toggleOverview { min-width: 32px; min-height: 32px; border: 0; border-left: 1px solid #625947; background: #26221c; color: var(--paper); font-size: 18px; cursor: pointer; }
#overview { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
#overview:focus-visible, #toggleOverview:focus-visible { outline: 2px solid var(--brass-lit); outline-offset: -2px; }
#overviewContent p { margin: 0; padding: 5px 7px; color: #c5beb0; font-size: 10px; line-height: 1.4; }
#orderReview { border-bottom: 1px solid #514633; }
#orderReview summary { padding: 11px 12px; color: var(--brass-lit); font-size: 12px; cursor: pointer; }
#orderCounts { display: inline-block; color: #c5beb0; font-size: 11px; }
#orderQueue { max-height: 240px; overflow-y: auto; }
#orderQueue button[aria-pressed="true"] { border-left: 3px solid var(--brass-lit); background: #3d3425; }
#turnBriefing { border-bottom: 1px solid #514633; }
#turnBriefing summary { padding: 12px; font-size: 12px; color: var(--brass-lit); cursor: pointer; }
#turnBriefingBody { max-height: 300px; overflow-y: auto; }
#turnBriefingBody .event-loss { border-left: 3px solid #d5957f; }
#turnBriefingBody .event-sighting { border-left: 3px solid #b9c998; }
#measurePanel { position: absolute; z-index: 4; bottom: 64px; left: 18px; width: min(420px, calc(100% - 80px)); box-sizing: border-box; border: 1px solid var(--brass); padding: 10px; background: var(--walnut); color: var(--paper); box-shadow: 0 3px 12px #0006; }
#measurePanel[hidden] { display: none; }
.measure-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.measure-heading strong { color: var(--brass-lit); font-size: 12px; font-weight: normal; }
.measure-heading .opt { min-height: 32px; }
#measurePanel p { font-size: 12px; line-height: 1.45; margin: 8px 0 0; }
#measurePanel .hint { font-size: 11px; }
#sheet:focus-visible { outline: 2px solid var(--brass-lit); outline-offset: -3px; }
#mapNotes { border-bottom: 1px solid #514633; }
#mapNotes summary { padding: 12px; color: var(--brass-lit); font-size: 12px; cursor: pointer; }
#pinCount { color: #c5beb0; }
#pinList { max-height: 260px; overflow-y: auto; }
.pin-row { display: flex; align-items: start; gap: 5px; }
.pin-row .info-link { min-width: 0; overflow-wrap: anywhere; }
.pin-row .opt { flex: 0 0 auto; min-height: 32px; }
#pinHint { position: absolute; z-index: 4; left: 18px; bottom: 64px; width: min(360px, calc(100% - 80px)); padding: 12px; border: 1px solid var(--brass); background: var(--walnut); font-size: 13px; line-height: 1.45; }
#pinHint p { margin: 0 0 8px; }
#pinHint[hidden], #undoPinDelete[hidden], #deletePin[hidden] { display: none; }
#pinDialog { width: min(470px, calc(100% - 24px)); max-height: 90vh; overflow: auto; padding: 20px; border: 1px solid var(--brass); background: var(--walnut); color: var(--paper); }
#pinDialog::backdrop { background: #0c0a08cc; }
#pinDialog h2 { margin: 0 0 10px; color: var(--brass-lit); font-size: 21px; }
#pinDialog label, #reportTools label { display: block; font-size: 12px; color: #c5beb0; margin: 8px 0 5px; }
#pinDialog input, #pinDialog select, #pinDialog textarea, #reportTools select { width: 100%; min-height: 34px; box-sizing: border-box; border: 1px solid #625947; background: #26221c; color: var(--paper); padding: 7px; border-radius: 0; font: 13px var(--serif); }
#pinDialog textarea { resize: vertical; }
#pinDialog .tool-buttons { margin-top: 15px; }
#pinDialog .opt, #pinHint .opt { min-height: 36px; }
#pinDialog :focus-visible, #reportTools :focus-visible { outline: 2px solid var(--brass-lit); outline-offset: 1px; }
#reportTools .tool-buttons { margin-top: 8px; }
#reportAge { margin-top: 8px; }
#commandGroups { border-bottom: 1px solid #514633; }
#commandGroups summary { padding: 12px; color: var(--brass-lit); font-size: 12px; cursor: pointer; }
#commandGroups label, #groupForm > label { display: block; font-size: 12px; color: #c5beb0; margin: 6px 0; }
#groupSelect, #groupName { width: 100%; min-height: 34px; box-sizing: border-box; border: 1px solid #625947; background: #26221c; color: var(--paper); padding: 7px; font: 13px var(--serif); }
#groupStatus { margin: 8px 0; }
#commandGroups .tool-buttons + p { margin-top: 9px; }
#groupDialog, #groupOrderDialog { width: min(600px, calc(100% - 24px)); max-height: 90vh; overflow: auto; box-sizing: border-box; padding: 22px; border: 1px solid var(--brass); background: var(--walnut); color: var(--paper); font-size: 14px; line-height: 1.45; }
#groupDialog::backdrop, #groupOrderDialog::backdrop { background: #0c0a08cc; }
#groupDialog h2, #groupOrderDialog h2 { color: var(--brass-lit); margin: 0 0 12px; font-size: 21px; overflow-wrap: anywhere; }
#groupDialog .tool-buttons, #groupOrderDialog .tool-buttons { margin-top: 12px; }
#groupDialog .opt, #groupOrderDialog .opt { min-height: 36px; }
#groupDialog fieldset { margin: 14px 0 0; padding: 8px; border: 1px solid #625947; }
#groupMembers { max-height: 300px; overflow-y: auto; }
#groupMembers label { display: flex; align-items: start; gap: 8px; padding: 7px 2px; cursor: pointer; font-size: 13px; }
#groupMembers span { overflow-wrap: anywhere; }
#groupMembers input { width: 18px; height: 18px; flex: 0 0 18px; }
#groupOrderRows { max-height: 38vh; overflow-y: auto; border-top: 1px solid #625947; }
.group-order-row { padding: 9px 6px; border-bottom: 1px solid #625947; }
.group-order-row strong { font-size: 14px; font-weight: normal; }
.group-order-row p { margin: 3px 0 0; font-size: 12px; color: #c5beb0; }
.group-order-row.excluded { opacity: .65; }
.group-warning { border-left: 3px solid var(--brass-lit); }
#groupOrderStatus { color: var(--brass-lit); }
#groupReplaceLabel { display: flex; gap: 8px; align-items: start; }
#groupReplaceLabel input { width: 18px; height: 18px; flex: 0 0 18px; }
#groupMapPanel { position: absolute; z-index: 4; left: 18px; bottom: 64px; width: min(390px, calc(100% - 80px)); padding: 12px; border: 1px solid var(--brass); background: var(--walnut); font-size: 13px; line-height: 1.45; }
#groupMapPanel p { margin: 0 0 8px; }
#groupMapPanel[hidden], #groupReplaceLabel[hidden], #deleteGroup[hidden], #adjustGroupOrders[hidden] { display: none; }
#groupDialog :focus-visible, #groupOrderDialog :focus-visible, #commandGroups :focus-visible { outline: 2px solid var(--brass-lit); outline-offset: 1px; }
@media (max-width: 1100px) {
  #intel { flex-basis: 230px; }
  #aside { flex-basis: 290px; }
}
@media (max-width: 1000px) {
  #head .party, #head .sit { font-size: 11px; }
  #head .clock { margin-left: 0; font-size: 11px; }
  #panelNav { display: flex; flex: 0 0 auto; background: var(--walnut-edge); border-bottom: 1px solid var(--brass); }
  #panelNav button { flex: 1; min-height: 40px; border: 0; border-right: 1px solid #514633; background: transparent; font-size: 13px; cursor: pointer; }
  #panelNav button[aria-pressed="true"] { background: var(--brass); color: var(--walnut-edge); }
  #panelNav button:focus-visible { outline: 2px solid var(--brass-lit); outline-offset: -3px; }
  #body { flex-direction: row; min-height: 0; }
  #intel, #aside { display: none; flex: 1 1 100%; max-height: none; border: 0; }
  #sheetwrap { display: none; flex: 1 1 auto; padding: 8px; }
  #overviewPanel { top: 14px; right: 14px; width: 145px; }
  #body[data-panel="map"] #sheetwrap, #body[data-panel="info"] #intel, #body[data-panel="orders"] #aside { display: block; }
  #force, #rulings { max-height: none; }
  #act { position: sticky; bottom: 0; background: var(--walnut); padding: 8px 0; z-index: 1; }
}

/* v1.7 route review and waypoint controls */
#waypointList { list-style: none; margin: 10px 0; padding: 0; }
#waypointList li { border-top: 1px solid #625947; padding: 7px 0; }
.waypoint-location { display: block; width: 100%; color: var(--brass-lit); background: transparent; border: 0; padding: 3px 0 6px; text-align: left; cursor: pointer; font: inherit; }
.waypoint-actions { display: flex; flex-wrap: wrap; gap: 4px; }
#routeSuggestion { border-left: 3px solid #66b4a5; margin: 8px 0; padding: 4px 0 8px 10px; }
#routeSuggestion .tool-buttons { margin-top: 8px; }
#routeAssistantStatus { color: #b2e0d4; }
#routeSuggestion[hidden], #restoreRoute[hidden] { display: none; }