/* FineArt calculators: shared touch and embedded layout, r1. */
html { scroll-behavior: smooth; }
body { overflow-wrap: anywhere; }
.wrap, .hd, .hd > div, .ask-grid > div, .tune-grid > div { min-width: 0; }
input[type=number], select { min-width: 0; min-height: 46px; font-size: 16px; }
button, summary { touch-action: manipulation; }
button:focus-visible, [data-box]:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.btn, .tab, button.tetr { min-height: 44px; }
summary { min-height: 44px; display: flex; align-items: center; }
.a-val, .pv { overflow-wrap: anywhere; }
.scroll-table { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
.zoom-tools { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.zoom-tools .zoom-value { min-width:48px; text-align:center; font-variant-numeric:tabular-nums; }
.drawing-scroll { max-width:100%; overflow:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--hair); }
.drawing-scroll:focus-visible { outline:2px solid var(--teal); }
.drawing-scroll #canvas { width:100%; min-width:0; }
.drawing-hint { font-size:12px; color:var(--soft); margin:8px 0 0; }
.ui-note { font-size:12px; color:var(--soft); margin:10px 0 0; }
.input-warning { margin:12px 0 0; padding:10px; border-left:3px solid var(--alert);
  background:var(--alert-soft); color:var(--alert-ink); font-size:13px; }
.input-warning[hidden] { display:none; }
body.input-invalid .wrap > :is(.answer, #flags, .block, #diebox, #packbox) { display:none; }
input[aria-invalid=true] { border-color:var(--alert); }
.ui-status { position:fixed; left:50%; bottom:90px; transform:translateX(-50%); z-index:40;
  max-width:calc(100% - 32px); padding:12px 18px; background:var(--ink); color:white;
  border-radius:8px; box-shadow:0 4px 16px #0003; font-size:14px; pointer-events:none; }
.ui-status:empty { display:none; }
.mobile-dock { display:none; }
dialog.spec-dialog { width:min(680px, calc(100% - 24px)); max-height:calc(100dvh - 32px);
  border:1px solid var(--line); border-radius:10px; padding:20px; color:var(--ink); background:var(--card); }
dialog.spec-dialog::backdrop { background:#0008; }
.spec-dialog h2 { margin:0 0 10px; font-size:20px; }
.spec-dialog textarea { display:block; width:100%; height:45dvh; margin:12px 0; padding:10px;
  font:16px/1.5 system-ui,sans-serif; border:1px solid var(--line); color:var(--ink); background:var(--card-2); }
.spec-actions { display:flex; gap:8px; flex-wrap:wrap; }
.copy, .clip { position:fixed !important; left:0 !important; top:0 !important; width:1px; height:1px;
  padding:0; border:0; opacity:0; pointer-events:none; font-size:16px; }
@media (max-width:640px) {
  .topbar { padding:10px 14px; gap:6px 12px; line-height:1.5; }
  .topbar > span:first-child { width:100%; font-size:11px; }
  .topbar .sp { display:none; }
  .topbar > span:last-child { font-size:11px; }
  .wrap { padding:20px 12px calc(100px + env(safe-area-inset-bottom, 0px)); }
  header { margin-bottom:16px; }
  .hd { gap:10px; }
  .logo { width:34px; height:38px; }
  h1 { font-size:clamp(23px, 6.5vw, 29px); line-height:1.15; }
  .lede { font-size:14px; }
  .ask { padding:14px; }
  .ask-grid, .tune-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 10px; }
  .ask-grid > div:first-child, #cell-paper { grid-column:1 / -1; }
  label { font-size:12px; }
  select { text-overflow:ellipsis; }
  .answer { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .a-cell { padding:14px 12px; }
  .a-val { font-size:21px; }
  .a-lab { font-size:12px; }
  .block-head { padding:12px; gap:10px; }
  .block-head > #copy { width:100%; }
  .block-body { padding:8px 12px 14px; }
  #packbox, #diebox { padding:14px 12px; }
  .block-body #packbox { padding:14px 0 0; }
  .flagline { display:block; }
  .flagline b { display:block; margin-bottom:4px; }
  .tabs { display:flex; width:100%; }
  .tab { flex:1 0 auto; padding:10px; }
  .key { gap:8px 14px; padding:12px; }
  .note { padding-left:12px; padding-right:12px; }
  .pk-g { grid-template-columns:repeat(2,minmax(0,1fr)); }
  table.mobile-cards, #packbox table.mobile-cards, #diebox table.mobile-cards { display:block; width:100%; overflow:visible; font-size:13px; }
  table.mobile-cards thead { display:none !important; }
  table.mobile-cards tbody, #packbox table.mobile-cards tbody, #diebox table.mobile-cards tbody {
    display:grid; width:100%; min-width:0; gap:10px; }
  table.mobile-cards tr { display:block; border:1px solid var(--hair); padding:10px; border-radius:6px; }
  table.mobile-cards tr.act { border:2px solid var(--teal); }
  table.mobile-cards tr[data-box] { cursor:pointer; }
  table.mobile-cards tr[data-box]::after { content:'Нажмите, чтобы выбрать'; display:block; font-size:11px; color:var(--teal-ink); margin-top:8px; }
  table.mobile-cards tr.act[data-box]::after { content:'Выбран · нажмите для автоподбора'; }
  table.mobile-cards td, table.mobile-cards td.hide-s { display:grid !important;
    grid-template-columns:minmax(86px, .85fr) minmax(0, 1.2fr); gap:10px; padding:6px 0;
    border-bottom:1px solid var(--hair); text-align:right; white-space:normal; font-size:13px; }
  table.mobile-cards td::before { content:attr(data-label); text-align:left; font-size:11px; letter-spacing:0;
    color:var(--soft); font-weight:500; line-height:1.4; }
  table.mobile-cards td:first-child { display:block !important; text-align:left; font-weight:700; font-size:14px; }
  table.mobile-cards td:first-child::before { display:none; }
  table.mobile-cards td:last-child { border-bottom:0; }
  table.mobile-cards td > .sub.hide-s { display:none !important; }
  table.mobile-cards td > .cell-value { min-width:0; }
  table.mobile-cards tr.grp { background:var(--chrome); border:0; padding:8px 10px; }
  .mobile-dock { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:30; gap:10px;
    background:var(--card); border-top:1px solid var(--line); padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -4px 18px #0001; }
  .mobile-dock .btn { flex:1; font-size:14px; min-height:46px; }
  .mobile-dock .primary { background:var(--teal); border-color:var(--teal); color:white; }
  body.keyboard-open .mobile-dock { display:none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }