/* Painted UI atlas, nine-sliced so corners survive any control or panel size.
   This layer owns appearance only; the existing layouts and handlers still apply. */
#hud {
  --ink:#193e3d;
  --muted:#52645a;
  --edge:#c8c3a3;
  --jade:#28664f;
  --frame-panel:url('../assets/ui/jade-v1/panel.webp');
  --frame-ivory:url('../assets/ui/jade-v1/ivory.webp');
  --frame-ivory-hover:url('../assets/ui/jade-v1/ivory-hover.webp');
  --frame-selected:url('../assets/ui/jade-v1/selected.webp');
  --frame-jade:url('../assets/ui/jade-v1/jade.webp');
  --frame-jade-hover:url('../assets/ui/jade-v1/jade-pressed.webp');
  --frame-jade-pressed:url('../assets/ui/jade-v1/jade-pressed.webp');
  --frame-disabled:url('../assets/ui/jade-v1/disabled.webp');
  --frame-danger:url('../assets/ui/jade-v1/danger.webp');
  --paper:#f7f4e4;
  --paint:var(--paper);
  --panel-shadow:0 4px 8px #263b3320,0 16px 32px #263b3329;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}

/* The painted border extends inward without changing a layout's border width. */
#hud #topbar,
#hud #toolbar,
#hud #town-controls,
#hud #info.detail-inspector,
#hud #secondary-resources,
#hud #survival-guide,
#hud #harvest-map-controls,
#hud #settlement-overview,
#hud .dialog {
  background:none;
  border-color:transparent;
  border-image:var(--frame-panel) 52 fill / 17px / 0 stretch;
  box-shadow:var(--panel-shadow);
  color:var(--ink);
}
#hud #topbar { border-image-source:var(--frame-ivory); border-image-width:13px; }
#hud #jade-guide-chip {
  background:none;
  border-image:var(--frame-ivory) 44 fill / 12px / 0 stretch;
  box-shadow:0 2px 6px #263b3320;
  padding-inline:12px;
}
#hud #toolbar .toolbar-heading,
#hud #town-controls header { border-color:#c6c2a3; }
#hud #toolbar #toolbar-path,
#hud #town-controls h2 { font-weight:700; letter-spacing:.06em; }
#hud #town-controls header { padding-bottom:10px; border-bottom:1px solid #c6c2a3; }
#hud #town-controls h2 { margin:0; }

/* All real button controls share the same raster surface and state vocabulary.
   Illustration and disclosure buttons remain unframed. */
#hud #toolbar .tb,
#hud #toolbar #toolbar-categories .tb-category,
#hud #toolbar .tool-group .tb,
#hud.is-placing #toolbar .tool-group .tb.active,
#hud #toolbar .toolbar-nav,
#hud #toolbar #placement-panel button,
#hud #jade-build-actions button,
#hud #town-dock button,
#hud #town-controls button,
#hud #town-controls #speed button.active,
#hud #info button,
#hud .dialog button,
#hud #new-game-settings button,
#hud #production-goals button,
#hud #harvest-map-controls button,
#hud #dynamic-coach button,
#hud #guide-toggle,
#hud #quick-pause,
#hud #resource-more,
#hud #jade-back-categories,
#hud #toolbar #jade-build-actions #jade-build-confirm {
  background:none;
  border-color:transparent;
  border-image:var(--control-state,var(--control-frame,var(--frame-ivory))) 44 fill / 12px / 0 stretch;
  color:var(--control-state-ink,var(--control-ink,var(--ink)));
  text-shadow:none;
  box-shadow:var(--control-shadow,0 2px 3px #3445341f);
  cursor:pointer;
  transition:box-shadow 140ms ease,color 140ms ease;
}
#hud #toolbar .tb:is(:hover,.active,.is-short.active),
#hud #town-dock #open-build,
#hud #town-controls #speed button.active,
#hud #info .building-detail-tabs button[aria-pressed="true"],
#hud #new-game-settings .start-presets button[aria-pressed="true"] { background:none; }
#hud button:hover {
  --control-state:var(--control-hover,var(--frame-ivory-hover));
  --control-shadow:0 3px 6px #34453430;
}
#hud button:active {
  --control-state:var(--control-pressed,var(--frame-selected));
  --control-shadow:inset 0 2px 5px #163b353d;
}
#hud button:is(:disabled,[aria-disabled="true"]) {
  --control-state:var(--frame-disabled);
  --control-state-ink:#526058;
  --control-shadow:none;
  cursor:not-allowed;
}
#hud #toolbar #jade-build-actions #jade-build-confirm:disabled,
#hud #new-game-settings button:disabled { opacity:1; }
#hud :is(#open-build,#jade-build-confirm,#coach-action,#production-goals-apply,
  #new-game-review-button,#new-game-confirm,#fb-send,#save-now,#over-restart),
#hud #town-controls #speed button.active {
  --control-frame:var(--frame-jade);
  --control-hover:var(--frame-jade-hover);
  --control-pressed:var(--frame-jade-pressed);
  --control-ink:#fffbee;
}
#hud #toolbar .tb.active,
#hud #info button[aria-pressed="true"],
#hud #new-game-settings .start-presets button[aria-pressed="true"] {
  --control-frame:var(--frame-selected);
  --control-hover:var(--frame-selected);
  --control-ink:#214e3f;
  font-weight:700;
}
#hud :is(button.danger,button.del,button.clear-all),
#hud #new-game-confirm {
  --control-frame:var(--frame-danger);
  --control-hover:var(--frame-danger);
  --control-pressed:var(--frame-danger);
  --control-ink:#823b2d;
}
#hud #toolbar .tb.active { border-image-width:11px; }
#hud #toolbar .tb { border-image-width:10px; }
#hud #toolbar .tb .ic { filter:drop-shadow(0 2px 1px #493d2920); }
#hud #toolbar .tb .lb,
#hud #toolbar .category-label { font-weight:600; }
#hud #toolbar .tb.active .lb::before { content:'✓ '; color:#2b6a51; }
#hud #toolbar .material-badge { box-shadow:0 0 0 2px #f7f1dc; }
#hud #toolbar #jade-build-art,
#hud #toolbar #jade-build-title {
  border-image:none;
  box-shadow:none;
  background:none;
}
#hud #toolbar #jade-build-title>span::after { color:#4e7a60; }
#hud #town-dock button { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
#hud #town-dock #open-build { letter-spacing:.12em; }
#hud #town-dock .ui-icon,
#hud #town-controls :is(#sys,#speed) svg.ui-icon {
  width:21px;
  height:21px;
  flex:0 0 21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#hud #town-controls #sys button { gap:10px; padding-inline:14px; }
#hud #town-controls #sys button>span { font-size:13px; }
#hud #town-controls #speed button { display:flex; align-items:center; justify-content:center; gap:4px; }
#hud #town-controls #speed .ui-icon { width:16px; height:16px; flex-basis:16px; }

/* Nested sheets keep a quieter edge than their enclosing panel. */
#hud #info.detail-inspector>.info-head,
#hud #info.detail-inspector>.building-detail-tabs,
#hud #info .detail-actions {
  background:#e6e9d6b3;
  border-color:#c8c3a3;
}
#hud #info :is(.building-facts>div,.survival-fact,.inventory-item),
#hud #secondary-resources .res {
  background:#fffcf0a8;
  border-color:#d6d0b5;
  box-shadow:inset 0 1px #fffdf4;
}

/* Settings, save, help and planning dialogs now belong to the same light skin. */
#hud .overlay { background:#18392f80; backdrop-filter:blur(3px); }
#hud .dialog { --paint:var(--paper); border-image-width:20px; }
#hud .dialog :is(h2,h3,h4,strong,label,th),
#hud .dialog .sav-name,
#hud .dialog .sav-info { color:var(--ink); }
#hud .dialog :is(p,li,small,summary,caption),
#hud .dialog :is(.sav-hint,.save-empty,.server-saves-hint,.fb-row,.fb-status) { color:var(--muted); }
#hud .dialog h2 { line-height:1.4; letter-spacing:.05em; }
#hud .dialog h2 small { display:inline-block; color:var(--muted); letter-spacing:0; }
#hud .dialog h3 { font-weight:700; }
#hud .start-settings-header,
#hud .production-goals-header {
  background:#e4e8d5a8;
  border-color:#c8c3a3;
}
#hud .start-settings-footer,
#hud .production-goals-footer {
  background:#e6e8d5a8;
  border-color:#c8c3a3;
}
#hud .dialog :is(input:not([type="checkbox"]),select,textarea) {
  box-sizing:border-box;
  background:#fffdf2;
  border:1px solid #b7bda2;
  border-radius:7px;
  color:var(--ink);
  box-shadow:inset 0 2px 3px #394c3510;
  font-family:inherit;
  min-height:44px;
}
#hud .dialog :is(input,textarea)::placeholder { color:#6c7968; opacity:1; }
#hud .dialog select option { background:#fffdf2; color:var(--ink); }
#hud .dialog input[type="checkbox"] { accent-color:var(--jade); }
#hud .dialog input[aria-invalid="true"] { border-color:#a6533a; }
#hud .dialog :is(button,input,select,textarea,summary):focus-visible,
#hud :is(button,input,select,textarea,summary):focus-visible {
  outline:2px solid #276a52;
  outline-offset:3px;
}
#hud .dialog .save-row,
#hud #new-game-settings :is(.start-preview,#new-game-review),
#hud .dialog .goal-detail-row details[open] {
  background:#e9ecdaa3;
  border-color:#c8c3a3;
}
#hud .dialog :is(.start-settings-details,.production-goals-rules,#server-saves),
#hud #production-goals .production-goal-row { border-color:#c8c3a3; }
#hud .production-goal-table thead th { background:#e4e8d5; }
#hud .production-goal-row :is(label,strong) { color:var(--ink); }
#hud #new-game-settings .start-presets strong { color:var(--ink); }
#hud #new-game-settings .start-settings-warning {
  background:#f4e4cc;
  border-color:#b47947;
  color:#75472b;
}
#hud #new-game-settings .start-settings-warning strong,
#hud .dialog .fb-status.err { color:#823b2d; }
#hud .dialog .err-pre { color:#823b2d; background:#f4e7d8; border-color:#c8a688; }
#hud .dialog button { min-height:44px; }
#hud .dialog .save-actions { flex-wrap:wrap; }
#hud .dialog .file-io-row { flex-wrap:wrap; }

@media (max-width:760px) {
  #hud #toolbar { border-image-width:15px; }
  #hud #toolbar .tb { border-image-width:9px; }
  #hud #town-controls #sys button { padding-inline:10px; }
  #hud .dialog { border-image-width:16px; }
}
@media (prefers-reduced-motion:reduce) {
  #hud button { transition:none; }
  #hud .overlay { backdrop-filter:none; }
}

/* Readable inventory and actionable states within the existing jade HUD. */
#hud #res-row button.res {
  appearance:none; color:var(--ink); font:inherit; text-align:left;
  border-image:none; cursor:pointer; touch-action:manipulation;
}
#hud #core-resources .res {
  display:grid; grid-template-columns:26px minmax(0,1fr); grid-template-rows:16px 24px;
  gap:0 5px; min-height:44px; padding:0 4px;
}
#hud #core-resources .res .res-icon { grid-column:1; grid-row:1/3; align-self:center; }
#hud #core-resources .res .res-label {
  display:block; grid-column:2; grid-row:1; font-size:11px; line-height:16px;
  color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#hud #core-resources .res b { grid-column:2; grid-row:2; line-height:24px; font-weight:600; }
#hud #core-resources #res-food { grid-template-columns:26px minmax(0,1fr); grid-template-rows:16px 24px; min-height:44px; }
#hud #core-resources #res-food>b { grid-column:2; grid-row:2; }
#hud #core-resources #res-food .res-label { grid-column:1/-1; }
#hud #core-resources #res-food .res-icon { grid-row:2; }
#hud #jade-food-days { display:block; grid-column:1/-1; grid-row:3; font-size:10px; line-height:11px; }
#hud #core-resources #res-food { grid-template-rows:13px 18px 11px; }
#hud #core-resources #res-food>b { line-height:18px; }
#hud #core-resources .res:hover,#hud #core-resources .res[aria-expanded=true] { background:#e4ecd5; }
#hud #res-row button.res:focus-visible { outline:2px solid var(--jade); outline-offset:-2px; }
#hud #secondary-resources .res { min-height:44px; width:100%; }
#hud #secondary-resources .res:hover,#hud #secondary-resources .res[aria-expanded=true] { background:#e4ecd5; border-color:#7f9e80; }
#hud #resource-detail { grid-column:1/-1; padding:10px; border-bottom:1px solid var(--edge); }
#hud #resource-detail header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#hud #resource-detail h3 { margin:0; color:var(--ink); font-size:16px; }
#hud #resource-detail p { margin:4px 0 0; font-size:14px; line-height:1.7; white-space:normal; overflow-wrap:anywhere; color:var(--muted); }
#hud #resource-detail-close { min-width:44px; min-height:44px; border:1px solid var(--edge); border-radius:9px; background:#fffdf2; color:var(--ink); font-size:22px; }
#hud #resource-detail-close:hover { background:#e4ecd5; }
#hud #quick-pause { display:flex; flex-direction:column; justify-content:center; gap:1px; }
#hud #quick-pause::before,#hud #quick-pause[aria-pressed=true]::before { content:attr(data-action); font-family:inherit; font-size:12px; line-height:17px; }
#hud #quick-pause::after { content:attr(data-state); font-size:10px; line-height:13px; color:var(--muted); }
#hud #quick-pause[aria-pressed=true] { background:#e4ecd5; }
#hud #toolbar .material-badge {
  width:auto; height:auto; max-width:calc(100% - 8px); min-height:18px;
  padding:1px 4px; top:4px; right:4px; border-radius:4px;
  background:#f8ebcd; color:#795222; font-size:10px; line-height:16px;
  box-shadow:0 0 0 1px #c9ad72; white-space:nowrap;
}
#hud #toolbar .tb.is-short .ic { opacity:.72; }
#hud #jade-guide-chip[aria-expanded=true] b { transform:rotate(90deg); }
#hud #survival-guide { overscroll-behavior:contain; }
@media (min-width:761px) {
  #hud #core-resources { grid-template-columns:1.3fr repeat(4,minmax(0,1fr)); }
  #hud #core-resources #res-food .res-label { grid-column:2; }
  #hud #jade-food-days { display:block; grid-column:1/-1; grid-row:3; font-size:10px; line-height:11px; }
  #hud #core-resources #res-food { grid-template-rows:13px 18px 11px; }
  #hud #core-resources #res-food>b { line-height:18px; }
  #hud #core-resources #res-food .res-icon { grid-row:1/3; }
}
@media (max-width:760px) {
  #hud #core-resources .res,#hud #core-resources #res-food { grid-template-columns:18px minmax(0,1fr); gap:0 1px; padding:0 1px; }
  #hud #core-resources .res .res-icon { width:18px; height:22px; }
  #hud #core-resources .res .res-label { grid-column:1/-1; }
  #hud #core-resources .res .res-icon { grid-row:2; }
  #hud #core-resources .res b { font-size:13px; }
  #hud #secondary-resources { max-height:calc(100dvh - var(--hud-height) - 100px); }
}

@media (max-width:760px) {
  /* Notices float over the map, above the build tray's action row. */
  #hud[data-mode="build"] #toasts,
  #hud[data-mode="build"]:has(#placement-info:not(.hidden)) #toasts,
  #hud[data-mode="build"]:has(#road-controls:not(.hidden)) #toasts {
    top:calc(var(--hud-height) + max(8px,env(safe-area-inset-top)) + 58px);
    bottom:auto; left:10px; right:10px; max-width:none; max-height:64px;
  }
}