/* Mystica platform · shared compact controls. No rules or hit areas are removed. */
:root {
  --control-height: 34px;
  --counter-height: 32px;
  --control-radius: 3px;
  --control-line: #ad9875;
  --control-paper: #fff9ed;
}

@media screen {
  .atelier .field, #modal .field {
    min-height: var(--control-height);
    border: 1px solid var(--control-line);
    border-radius: var(--control-radius);
    padding: 6px 9px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    background: var(--control-paper);
    box-shadow: none;
  }
  .atelier textarea.field, #modal textarea.field { min-height: 110px; line-height: 1.6; }
  .atelier .btn, #modal .btn {
    min-height: var(--control-height);
    padding: 6px 10px;
    border-width: 1px;
    border-radius: var(--control-radius);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    box-shadow: none;
  }
  .atelier .btn.selected, #modal .btn.selected {
    box-shadow: inset 0 -2px 0 #795422;
  }
  .atelier-header .mode-tabs .btn {
    min-height: 42px;
    padding: 8px 16px;
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 400;
  }
  .atelier .ability-pay.btn, .atelier .ability-archetype-buttons .btn,
  .atelier .combat-dock .btn, .atelier .combat-abilities-heading .btn {
    min-height: var(--counter-height);
    padding: 5px 8px;
    font-size: 13px;
  }
  .atelier .field:focus-visible, #modal .field:focus-visible,
  .atelier button:focus-visible, #modal button:focus-visible {
    outline: 2px solid #576c50;
    outline-offset: 2px;
  }

  /* Initiative, uses, ammunition, durations and the resource bar share a rhythm. */
  .atelier .initiative .field,
  .atelier .combat-dock-utility .field,
  .atelier .field.item-use-input,
  .atelier .compact-number,
  .atelier .ko-form .field,
  #modal input.field[type="number"] {
    width: 4.5rem;
    min-width: 4.5rem;
    max-width: 100%;
    min-height: var(--counter-height);
    height: var(--counter-height);
    padding: 4px 6px;
    border: 1px solid var(--control-line);
    border-radius: var(--control-radius);
    text-align: center;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  .atelier .initiative,
  .atelier .combat-dock-utility label,
  .atelier .item-use-counter {
    gap: 6px;
    align-items: center;
    font-size: 13px;
    line-height: 1.4;
  }
  .atelier .item-use-counter > strong { font-weight: 500; }
  .atelier .item-use-counter > span { font-variant-numeric: tabular-nums; }
  .atelier .compact-counter, .atelier .companion-counter {
    padding: 6px 8px;
    border: 1px solid #af936866;
    border-radius: var(--control-radius);
    background: #fff9e940;
    box-shadow: none;
  }
  .atelier .counter-title, .atelier .companion-counter > span {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
  }
  .atelier .counter-title > strong { font-size: 15px; }
  .atelier .counter-controls { gap: 6px; margin-top: 4px; }
  .atelier .counter-controls output,
  .atelier .companion-counter output,
  .atelier .dock-companion-row output,
  .atelier .counter-value,
  .atelier .stat-value,
  .atelier .enchantment-counter > strong,
  .atelier .artifact-charges .inline > b {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
  }
  .atelier .counter-controls output small,
  .atelier .companion-counter output small,
  .atelier .dock-companion-row output small {
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    color: #6b5c42;
  }
  .atelier .counter-button,
  .atelier .combat-dock .counter-button,
  .atelier .combat-dock .dock-companion-row .counter-button,
  .atelier .companion-counter .btn,
  .atelier .stat-row .stepper,
  .atelier .stat-row .btn {
    flex: 0 0 var(--counter-height);
    width: var(--counter-height);
    min-width: var(--counter-height);
    height: var(--counter-height);
    min-height: var(--counter-height);
    padding: 0;
    border: 1px solid var(--control-line);
    border-radius: var(--control-radius);
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
  }
  .atelier .dock-companion-row {
    grid-template-columns: 15px minmax(0,1fr) var(--counter-height) auto var(--counter-height);
    gap: 5px;
    min-height: var(--counter-height);
  }
  .atelier .stat-row { grid-template-columns: 1fr var(--counter-height) 38px var(--counter-height) 46px; }
  .atelier .resource-term,
  .atelier option[data-resource], .atelier select[data-resource],
  #modal .resource-term, #modal option[data-resource], #modal select[data-resource] {
    font-weight: 700 !important;
  }
  .atelier .counter-mn output { color: var(--energy-mn); font-weight: 700; }
  .atelier .counter-sk output { color: var(--energy-sk); font-weight: 700; }
  .atelier .counter-uk output { color: var(--energy-uk); font-weight: 700; }
  .atelier .counter-gu output { color: var(--energy-gu); font-weight: 700; }
  .atelier .counter-mn output small, .atelier .counter-sk output small,
  .atelier .counter-uk output small, .atelier .counter-gu output small {
    color: inherit;
    font-weight: 700;
  }
  .atelier output.action-a { font-weight: 700; }
}

/* Keep the light appearance, with comfortable targets for fingers. */
@media screen and (pointer: coarse) {
  :root { --control-height: 44px; --counter-height: 44px; }
  .atelier .field, #modal .field,
  .atelier .field.item-use-input,
  .atelier .initiative .field,
  .atelier .combat-dock-utility .field { font-size: 16px; }
  .atelier .combat-dock-counters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .atelier .combat-dock-counters.with-companions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .atelier .with-companions .dock-companion-actions { grid-column: 1 / -1; }
}

@media screen and (max-width: 700px) {
  .atelier-header .mode-tabs .btn { padding: 7px 9px; font-size: 17px; }
  .atelier .item-use-counter { row-gap: 6px; }
  .atelier .compact-counter { padding: 5px 6px; }
}

@media screen and (max-width: 600px) {
  .atelier .hub-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .atelier .hub-heading > div { min-width: 0; max-width: 100%; }
  .atelier .hub-heading .hub-level { width: 100%; min-width: 0; max-width: none; }
  .atelier .hub-level .field { width: 100%; min-width: 0; max-width: 100%; }
}