:root {
    --bg: #f4f2ee; --panel: #ffffff; --ink: #2b2f33; --dim: #7a828a;
    --accent: #2f6fdb; --good: #2c8a4b; --warn: #c05621; --open: #d0342c;
  }
  * { box-sizing: border-box; }
  body { margin: 0; font: 14px/1.45 system-ui, "Segoe UI", sans-serif; color: var(--ink);
         display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; }
  #side { background: var(--panel); border-right: 1px solid #e2e0da; padding: 14px;
          min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
  h1 { font-size: 17px; margin: 0; }
  h1 small { color: var(--dim); font-weight: 400; font-size: 12px; }
  h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
       color: var(--dim); margin: 4px 0 2px; }
  h2 span { font-weight: 400; }
  .small { font-size: 12px; }
  #sets, #stones { display: flex; flex-wrap: wrap; gap: 6px; }
  #stage { min-width: 0; min-height: 0; position: relative; background: var(--bg); }
  canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
  .piece { border: 1px solid #e2e0da; border-radius: 8px; padding: 8px 10px; }
  .piece .row { display: flex; justify-content: space-between; align-items: baseline; }
  .piece .name { font-weight: 600; }
  .piece .count { color: var(--dim); font-variant-numeric: tabular-nums; }
  .piece .count input { width: 44px; border: 1px solid #d8d5ce; border-radius: 5px;
                        padding: 1px 4px; font: inherit; text-align: right; }
  .variants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  button { font: inherit; border: 1px solid #d8d5ce; background: #fbfaf7; color: var(--ink);
           border-radius: 7px; padding: 4px 10px; cursor: pointer; }
  button:hover { border-color: var(--accent); }
  button.armed { background: var(--accent); border-color: var(--accent); color: #fff; }
  button.primary { background: var(--good); border-color: var(--good); color: #fff; font-weight: 600; }
  button.primary:disabled { background: #b9c4bd; border-color: #b9c4bd; cursor: default; }
  button.ghost { border-style: dashed; color: var(--dim); }
  #actions { display: flex; flex-wrap: wrap; gap: 6px; }
  #status { padding: 8px 10px; border-radius: 8px; background: #f0efe9; min-height: 38px;
            overflow-wrap: anywhere; }
  #status.closed { background: #e4f2e8; color: var(--good); font-weight: 600; }
  #status.err { background: #fbe9e7; color: var(--open); }
  .cand { border: 1px solid #e2e0da; border-radius: 8px; padding: 7px 10px; }
  .cand:hover { border-color: var(--accent); background: #eef4fd; }
  .cand .gap { color: var(--warn); }
  .cand .exact { color: var(--good); font-weight: 600; }
  .solverow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .solverow input[type="number"] { width: 52px; border: 1px solid #d8d5ce; border-radius: 5px; padding: 3px 6px; font: inherit; }
  #hint { position: absolute; left: 12px; bottom: 10px; color: var(--dim); font-size: 12px;
          background: #ffffffcc; padding: 3px 8px; border-radius: 6px;
          max-width: calc(100% - 24px); pointer-events: none; }
  #save-status { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
  #save-status.err { color: var(--open); }
  #toolbar { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2;
             display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
  #toolbar button { pointer-events: auto; background: var(--panel); }
  #toolbar button.armed { background: var(--accent); }
  .cand .buttons { gap: 8px; }
  button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  /* While busy only pausing and saving stay usable. */
  body.busy #side button:not(#pause-search, #route-pause, #train-pause, #export, #save-project, #save-download),
  body.busy #side input { pointer-events: none; opacity: .7; }
  @media (max-width: 700px) {
    body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(220px, 52%) minmax(0, 1fr); }
    #stage { grid-row: 1; }
    #side { grid-row: 2; border-right: 0; border-top: 1px solid #e2e0da;
            padding-bottom: max(14px, env(safe-area-inset-bottom)); }
    #toolbar { top: max(10px, env(safe-area-inset-top)); }
  }
  @media (pointer: coarse) {
    button { min-height: 44px; min-width: 44px; }
    input[type="number"] { min-height: 40px; }
    .variants { gap: 8px; }
  }

  [hidden] { display: none !important; }
  details { border: 1px solid #e2e0da; border-radius: 8px; padding: 8px; }
  summary { cursor: pointer; font-weight: 600; }
  details label { display: block; margin: 8px 0; }
  details select, #project-name { width: 100%; max-width: 100%; font: inherit; }
  details p { font-size: 12px; }
  .buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  #diagnostics { max-height: 300px; overflow-y: auto; }
  #diagnostics button { display: block; text-align: left; margin-top: 4px; width: 100%; }
  #overlap-picker { position: absolute; z-index: 3; top: 70px; left: 12px; right: 12px;
    padding: 12px; background: white; border: 2px solid var(--accent); border-radius: 8px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  #overlap-picker select { max-width: 100%; }
  .stone-inventory { display: flex; width: 100%; gap: 6px; align-items: center; }
  .stone-inventory button { flex: 1; }
  .stone-inventory input { width: 60px; }
  select:focus-visible, canvas:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); }

/* Backup management is explicit and separate from the current design. */
#project-manage { border:1px solid #c9c3b8; padding:8px; margin-top:8px; }
#project-manage p { overflow-wrap:anywhere; }
#project-status { font-size:12px; margin:6px 0; }
#train-switches label { margin:5px 0; }

/* Bounded advanced tools remain usable in the narrow phone sidebar. */
#side textarea, #room-bounds { width: 100%; }
#side textarea { min-height: 64px; resize: vertical; }
#route-report p, #search-report, #offline-status { font-size: 12px; overflow-wrap: anywhere; }
#candidate-page { align-self: center; font-size: 12px; }