/* One set of physical controls for the captain's desk, chart and enrolment ledger.
   Nine-slice SVG edges keep nails and carved corners intact at every button width. */
:root {
  --control-timber: url('/art/interface/carved-plank.svg');
  --control-brass: url('/art/interface/brass-plank.svg');
  --control-paper: url('/art/interface/parchment-field.svg');
  --control-cream: #fff0c6;
  --control-ink: #38200f;
}
body :is(button, .button) { border-radius: 0; }

/* Portraits, inventory illustrations and the ship's navigation retain their own frames. */
body :is(#workspace, #sidebar, #modal, .site-header, main) :is(button, a.button):not(:where(.captain-button, .resource, .header-ship, .header-army, .nav-item, .avatar-choice, .account-seal, .text-button, .link-button, .password-toggle, #mobile-dock button)) {
  border: 2px solid #725029;
  border-image: var(--control-timber) 10 fill / 9px / 0 stretch;
  border-radius: 0;
  background: #342116 url('/art/interface/wood.webp') center / 360px;
  color: var(--control-cream);
  box-shadow: 0 2px 2px #150b0870;
  text-shadow: 0 1px 1px #130c08;
  font-family: var(--font-body);
  font-weight: 650;
  letter-spacing: .15px;
  transition: filter .12s, color .12s;
  transform: none;
}
body :is(#workspace, #sidebar, #modal, .site-header, main) :is(.primary, .button-gold, .chat-compose button) {
  border-image: var(--control-brass) 10 fill / 9px / 0 stretch;
  background: #cda35d;
  color: var(--control-cream);
  text-shadow: 0 1px 1px #301c0e;
  font-weight: 750;
}
body :is(#workspace, #sidebar, #modal, .site-header, main) :is(button, a.button):not(:where(.captain-button, .resource, .header-ship, .header-army, .nav-item, .account-seal, .text-button, .link-button, .password-toggle, #mobile-dock button)):hover:not(:disabled) {
  filter: brightness(1.12);
  transform: none;
}
body :is(#workspace, #sidebar, #modal, .site-header, main) :is(button, a.button):not(:where(.captain-button, .resource, .header-ship, .header-army, .nav-item, .account-seal, .text-button, .link-button, .password-toggle, #mobile-dock button)):active:not(:disabled) {
  filter: brightness(.94);
  box-shadow: inset 0 2px 4px #170d0866;
}
body :is(#workspace, #sidebar, #modal, .site-header, main) button:disabled {
  filter: saturate(.35);
  opacity: .64;
  cursor: not-allowed;
  text-shadow: none;
}

/* A brass-bound set of wooden index tabs replaces flat segmented switches. */
body :is(#workspace, #modal, .entry-panel) :is(.segmented, .tab-strip, .auth-tabs, .avatar-filters) {
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-color: #ae8349;
  gap: 6px;
}
body :is(#workspace, #modal, .entry-panel) :is(.segmented, .tab-strip, .auth-tabs, .avatar-filters) button:is(.active, [aria-selected='true']) {
  border-image: var(--control-brass) 10 fill / 9px / 0 stretch;
  color: var(--control-cream);
  text-shadow: 0 1px 1px #301c0e;
  box-shadow: 0 2px 0 #21130c, 0 3px 0 #cba164;
}
body :is(#workspace, #modal, .entry-panel) .auth-tabs { padding-bottom: 8px; }
body :is(#workspace, #modal, .entry-panel) .auth-tabs button { padding: 9px 13px; }
body :is(#workspace, #modal) .segmented button { padding: 6px; }
body :is(#workspace, #modal) .map-controls { border-radius: 0; }
body :is(#workspace, #modal) .map-controls button { margin-block: 1px; }
/* These compact helm controls have two-ID mobile rules in the layout sheet. */
body #workspace :is(#mobile-menu, #inventory-toggle),
body #sidebar #sidebar-close,
body #modal .modal-top > button[data-close] {
  border: 2px solid #725029;
  border-image: var(--control-timber) 10 fill / 9px / 0 stretch;
  background: #342116 url('/art/interface/wood.webp') center / 360px;
  color: var(--control-cream);
  border-radius: 0;
  box-shadow: 0 2px 2px #150b0870;
  text-shadow: 0 1px 1px #130c08;
}
body #workspace .ship-token .atlas-token {
  mix-blend-mode: normal;
  background-color: #efd5a1;
  box-shadow: 0 0 0 1px #b98c48;
}
body[data-view='reports'] #content-page > .content-intro button {
  border-image: var(--control-timber) 10 fill / 9px / 0 stretch;
  background: #342116 url('/art/interface/wood.webp') center / 360px;
  color: var(--control-cream);
  text-shadow: 0 1px 1px #130c08;
}

/* Ink on pale, framed paper, including selects and multi-line dispatches. */
body :is(#workspace, #modal, .entry-panel) :is(input, select, textarea):not(:where([type='hidden'], [type='checkbox'], [type='radio'], [type='range'], #active-island)) {
  color-scheme: light;
  color: var(--control-ink);
  -webkit-text-fill-color: var(--control-ink);
  border: 2px solid #906435;
  border-image: var(--control-paper) 10 fill / 7px / 0 stretch;
  border-radius: 0;
  background: #efdab0 url('/art/interface/parchment.webp') center / 650px;
  box-shadow: inset 0 2px 4px #5130133d;
  text-shadow: none;
  caret-color: #683b1d;
}
body :is(#workspace, #modal, .entry-panel) :is(input, textarea)::placeholder {
  color: #705437;
  -webkit-text-fill-color: #705437;
  opacity: 1;
  font-style: italic;
}
body :is(#workspace, #modal, .entry-panel) select:not(#active-island) {
  appearance: none;
  padding-right: 32px;
  /* Leave the paper centre open so the ink arrow remains visible. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='m3 8 5 5 5-5M8 3v10' fill='none' stroke='%235b351a' stroke-width='1.7'/%3E%3C/svg%3E"), url('/art/interface/parchment.webp');
  background-position: right 11px center, center;
  background-size: 16px 20px, 650px;
  background-repeat: no-repeat, repeat;
  border-image-slice: 10;
}
body :is(#workspace, #modal, .entry-panel) option { background: #f2ddb4; color: #38200f; }
body #workspace #active-island {
  color-scheme: dark;
  color: #ffe5a9;
  background: transparent;
  border-image: none;
  border-radius: 0;
  text-shadow: 0 2px 2px #1a0e09;
}
body :is(#workspace, #modal, .entry-panel) input[type='checkbox']:not(.avatar-choice input) {
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border: 1px solid #79552d;
  border-radius: 0;
  background: #efdab0 url('/art/interface/parchment.webp') center / 350px;
  box-shadow: inset 0 1px 3px #5b351a50;
  padding: 0;
  cursor: pointer;
}
body :is(#workspace, #modal, .entry-panel) input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m3 10 5 6 10-14M4 10l4 5L17 3' fill='none' stroke='%23472a16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Small written orders are ink links, never empty modern button outlines. */
body :is(#workspace, #sidebar, #modal, main) :is(.text-button, .link-button, .explore-link) {
  border: 0;
  border-image: none;
  border-radius: 0;
  background: none !important;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: currentColor;
  text-shadow: none;
  transform: none;
}
body :is(#workspace, #sidebar, #modal, main) :is(.text-button, .link-button, .explore-link):hover { text-decoration-thickness: 2px; }
body :is(#workspace, #modal, .entry-panel) .password-toggle {
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  color: #614224;
}
body #modal .voyage-ships > div {
  background: #e5c996 url('/art/interface/parchment.webp') center / 600px;
  color: #452911;
  border-color: #9c6d34;
  border-radius: 0;
}
body #modal .voyage-ships :is(label, label span, small),
body #modal .mission-estimate :is(svg, span, small, strong) { color: #503118; }
body :is(#workspace, #sidebar, #modal, main, .site-header) :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid #efc777;
  outline-offset: 3px;
}
body :is(#workspace, #modal, .entry-panel) :is(input, select, textarea):not(#active-island):focus-visible { outline-color: #8b4a20; }

/* The first page is an enrolment ledger laid on the same chart table. */
body .entry-panel {
  color: #452911;
  background: #ebc98b url('/art/interface/parchment.webp') center / cover;
  border: 6px solid #6d4724;
  border-image: url('/art/interface/brass-frame.svg') 22 / 12px / 0 stretch;
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: 0 0 0 2px #291a10, 0 16px 35px #0b171b80, inset 0 0 28px #89501f50;
}
body .entry-panel::before, body .entry-panel::after { content: none; }
body .entry-panel::after {
  content: '';
  position: absolute;
  top: -19px;
  right: 17px;
  left: auto;
  width: 36px;
  height: 36px;
  padding: 0;
  background: url('/art/interface/wax-seal-small.svg') center / contain no-repeat;
  pointer-events: none;
}
body .entry-panel :is(h2, label, label > small, p, .small-caps, .world-status, .check-label, .entry-footnote, .entry-mail-note, .entry-loading, .full-world-note) { color: #56371c; }
body .entry-panel h2 { color: #3d2413; text-shadow: 0 1px #fff0c480; }
body .entry-panel :is(.link-button, .link-button.muted, a:not(.button), .check-label a, .return-links a) { color: #673715; }
body .entry-panel .entry-heading { border-bottom-color: #80552966; }
body .entry-panel .world-status i { background: #3e6845; box-shadow: none; }
body .entry-panel :is(.form-error, .form-error:not(:empty)) { color: #792e20; border-color: #99482f88; background: #a54d2420; border-radius: 0; }
body .entry-panel :is(.recovery-key, .captain-summary) { color: #452911; background: #f5dfb680; border-color: #90623488; border-radius: 0; }
body .entry-panel .captain-summary :is(b, span) { color: #56371c; }
body .entry-panel .entry-mail-note strong { color: #452911; font-weight: 700; }
body .entry-panel .recovery-tag { color: #743e21; background: none; border-radius: 0; }
body .entry-panel .auth-tabs { border-color: #8d60366b; }
body :is(.discovery-card, .discovery-card > div) {
  border-radius: 0;
  background: linear-gradient(#23150d60, #23150d60), url('/art/interface/wood.webp') center / 500px;
  border-color: #a47b44;
}
body .discovery-card > img { transition: none; }
body .discovery-card:hover > img { transform: none; }
body .final-call { border-block-color: #a5804999; }
body :is(.notice, .toast) {
  border-radius: 0;
  color: #452911;
  border-color: #99713c;
  background: #e8c48a url('/art/interface/parchment.webp') center / 500px;
  box-shadow: 0 0 0 1px #3b2516, 0 5px 18px #170e0999;
}
body:has(.legal-page) { background: #332117 url('/art/interface/wood.webp') center / 600px; }
body .legal-page {
  color: #452911;
  background: #ebc98b url('/art/interface/parchment.webp') center / 800px;
  border: 2px solid #a87a3e;
  padding: 18px 30px 30px;
  box-shadow: 0 0 0 2px #271b11, 0 7px 25px #1c110b99;
}
body .legal-page :is(p, li) { color: #55381e; font-size: 17px; }
body .legal-page a { color: #753f20; text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 951px) {
  body :is(#workspace, #sidebar, #modal, .site-header, main) :is(button, a.button):not(:where(.captain-button, .resource, .header-ship, .header-army, .nav-item, .avatar-choice, .account-seal, .text-button, .link-button, .password-toggle)) { min-height: 36px; }
  body .hero-actions .button { font-size: 18px; }
  body :is(#workspace, #modal, .entry-panel, .site-header) :is(.primary, .secondary, .button, .nav-login, .tab-strip button, .auth-tabs button, .avatar-filters button) { font-size: 16px; }
  body #modal .voyage-ships label span { font-size: 14px; }
  body #modal .voyage-estimate { font-size: 15px; line-height: 1.4; }
  body #modal .voyage-estimate svg { width: 20px; height: 20px; }
}
@media (max-width: 950px) {
  body :is(#workspace, #sidebar, #modal, .site-header, main) :is(button, a.button):not(:where(.captain-button, .resource, .header-ship, .header-army, .nav-item, .avatar-choice, .account-seal, .password-toggle, #mobile-dock button)) { min-height: 48px; }
  body .entry-panel { padding: 22px; }
  body :is(#workspace, #modal, .entry-panel) input[type='checkbox']:not(.avatar-choice input) { width: 24px; min-width: 24px; height: 24px; min-height: 24px; }
  body :is(#workspace, #modal) .auth-tabs button { padding: 10px 9px; }
  body .entry-panel .auth-tabs button { padding-inline: 6px; }
  body .legal-page { margin: 20px 12px; padding: 14px 18px 24px; }
  body .legal-page :is(p, li) { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  body :is(button, a.button) { transition: none; }
}