* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

/* ──────────────────────────────────────────────────────────────
   FOOTRING — studio firing ledger
   An off-white field journal: letterpress serif headings, typewriter
   secondary text, ruled ledger lines, brick-red ink accents, rubber
   stamps, and hand-drawn kiln sketches where a photo is missing.
   Cues: Leuchtturm / Moleskine / a potter's sketchbook / 1950s kiln
   firing record cards.
   ────────────────────────────────────────────────────────────── */
:root {
  /* aged off-white paper */
  --cream:#f4ecdb;        /* page surface */
  --paper-2:#ede2cb;      /* bands / inset panels */
  --card:#fbf6ea;         /* index-card stock */
  --rule:#e6dabd;         /* faint ledger rule */
  --ash:#e1d4b6;          /* hairline divider */
  --line:#d2c09c;         /* input borders, ruled lines */
  /* ink */
  --ink:#372b1c;          /* primary handwriting/text */
  --ink-soft:#5b4a34;
  --kiln:#2c2114;         /* dark plate / spine */
  --kiln-mid:#695337;
  --smoke:#94815f;        /* typewriter secondary */
  --sketch:#75603f;       /* sketch ink */
  /* brick-red ledger ink */
  --margin-red:#b04a33;
  --red-soft:#c87a64;
  --red-wash:#f0ddd1;
  /* kiln-heat (kept for primary actions only) */
  --clay:#a8502a; --clay-light:#efe0c6; --clay-mid:#c2853f;
  --ember:#c75d1e; --ember-deep:#984412;
  --kiln-glow:rgba(199,93,30,0.30); --kiln-glow-soft:rgba(176,74,51,0.16);
  /* status */
  --ok:#5d7a45; --warn:#a8392a;
  /* type */
  --font:'Fraunces','Georgia',serif;
  --sans:'Mulish',system-ui,-apple-system,sans-serif;
  --type:'Courier Prime','Courier New',monospace;
  --hand:'Caveat',cursive;
  /* paper grain */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html { background:#241a0f; }
body {
  font-family:var(--sans); color:var(--ink); min-height:100vh;
  max-width:480px; margin:0 auto; font-size:15px; line-height:1.45;
  position:relative; isolation:isolate;
  background-color:var(--cream);
  background-image:
    radial-gradient(circle at 12% 6%, rgba(176,74,51,0.05), transparent 40%),
    radial-gradient(circle at 88% 18%, rgba(106,84,54,0.06), transparent 46%),
    radial-gradient(circle at 50% 98%, rgba(168,80,42,0.05), transparent 55%);
  box-shadow:0 0 60px rgba(20,12,4,0.5);
}
/* paper grain — fixed, never scrolls, never interactive */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grain); background-size:180px 180px;
  opacity:0.045; mix-blend-mode:multiply;
}

/* ── AUTH ── */
#authScreen { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:32px 24px; }
.auth-logo { font-family:var(--font); font-weight:900; font-size:42px; letter-spacing:0.01em; text-transform:uppercase; color:var(--ink); margin-bottom:8px; font-optical-sizing:auto; }
.auth-sub { font-family:var(--type); font-size:11px; text-transform:uppercase; letter-spacing:0.2em; color:var(--margin-red); margin-bottom:40px; }
.auth-card {
  background:var(--card); border:1px solid var(--line); border-radius:3px;
  padding:26px 24px 26px 30px; width:100%; max-width:360px;
  box-shadow:0 1px 0 #fff inset, 0 14px 30px -16px rgba(42,28,16,0.5), 0 2px 6px rgba(42,28,16,0.12);
  position:relative; background-image:repeating-linear-gradient(var(--card) 0 31px, var(--rule) 31px 32px);
}
.auth-card::before { content:""; position:absolute; left:20px; top:0; bottom:0; width:1.5px; background:var(--margin-red); opacity:0.6; }
.auth-card h2 { font-family:var(--font); font-size:22px; font-weight:600; margin-bottom:20px; }
.auth-field { margin-bottom:14px; }
.auth-field label,.form-section label { font-family:var(--type); }
.auth-field label { display:block; font-size:10px; text-transform:uppercase; letter-spacing:0.14em; color:var(--smoke); margin-bottom:6px; font-weight:700; }
.auth-field input { width:100%; border:1px solid var(--line); border-radius:4px; padding:11px 12px; font-size:15px; font-family:var(--sans); background:#fffdf7; color:var(--ink); outline:none; -webkit-appearance:none; transition:border-color .15s, box-shadow .15s; }
.auth-field input:focus { border-color:var(--margin-red); box-shadow:0 0 0 3px var(--kiln-glow-soft); }
.auth-btn { width:100%; padding:13px; background:linear-gradient(180deg,var(--ember),var(--ember-deep)); color:#fdf3e6; border:none; border-radius:5px; font-size:15px; font-family:var(--font); font-weight:600; letter-spacing:0.01em; cursor:pointer; margin-top:8px; box-shadow:0 1px 0 rgba(255,220,180,0.3) inset, 0 4px 14px -6px var(--kiln-glow); transition:transform .08s, box-shadow .15s; }
.auth-btn:active { transform:translateY(1px); }
.auth-btn:disabled { background:#c9bda4; box-shadow:none; color:#f3ece0; }
.auth-toggle { text-align:center; margin-top:18px; font-size:13px; color:var(--smoke); }
.auth-toggle button { background:none; border:none; color:var(--margin-red); cursor:pointer; font-size:13px; text-decoration:underline; font-family:var(--sans); font-weight:600; }
.auth-msg { font-size:13px; padding:10px 12px; border-radius:5px; margin-top:12px; display:none; }
.auth-msg.ok { background:#eef2e3; color:var(--ok); }
.auth-msg.err { background:var(--red-wash); color:var(--warn); }

/* ── SHELL / MASTHEAD ── */
#appShell { display:none; }
header {
  background:linear-gradient(180deg,#f7f0e0,#f1e8d4);
  color:var(--ink); padding:16px 18px 14px;
  display:flex; align-items:flex-end; justify-content:space-between;
  position:sticky; top:0; z-index:100; border-bottom:1px solid var(--line);
  box-shadow:0 6px 16px -12px rgba(20,12,4,0.5);
}
/* twin ledger rule under the masthead */
header::after {
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px;
  border-top:2px solid var(--margin-red); border-bottom:1px solid var(--margin-red);
  opacity:0.85;
}
.masthead h1 { font-family:var(--font); font-size:30px; font-weight:900; text-transform:uppercase; letter-spacing:0.015em; line-height:0.92; color:var(--ink); font-optical-sizing:auto; }
.masthead .subtitle { font-family:var(--type); font-size:10px; font-weight:700; color:var(--margin-red); margin-top:6px; letter-spacing:0.26em; text-transform:uppercase; }
.hdr-meta { font-family:var(--type); text-align:right; line-height:1.3; display:flex; flex-direction:column; align-items:flex-end; }
.hdr-meta #hdrCount { font-family:var(--font); font-weight:700; font-size:20px; color:var(--ink); }
.hdr-meta-label { font-size:9px; text-transform:uppercase; letter-spacing:0.2em; color:var(--smoke); }

.tab-bar { display:flex; background:var(--paper-2); border-bottom:1px solid var(--line); overflow-x:auto; }
.tab-bar button { flex:1; min-width:60px; padding:11px 4px 10px; background:none; border:none; color:var(--smoke); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; font-family:var(--type); font-weight:700; white-space:nowrap; position:relative; transition:color .15s; }
.tab-bar button.active { color:var(--ink); }
.tab-bar button.active::after {
  content:""; position:absolute; left:16%; right:16%; bottom:0; height:3px; border-radius:3px 3px 0 0;
  background:var(--margin-red);
}
.view { display:none; padding:0 0 92px; }
.view.active { display:block; animation:pageIn .32s ease both; }
@keyframes pageIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ── SEARCH + FILTER CHIPS ── */
.search-bar { padding:12px 12px; background:var(--paper-2); border-bottom:1px solid var(--ash); display:flex; gap:8px; }
.search-bar input { flex:1; border:1px solid var(--line); border-radius:4px; padding:8px 12px 8px 30px; font-size:14px; background:#fffdf7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394815f' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E") 9px center/14px no-repeat; color:var(--ink); font-family:var(--sans); outline:none; transition:border-color .15s, box-shadow .15s; }
.search-bar input:focus { border-color:var(--margin-red); box-shadow:0 0 0 3px var(--kiln-glow-soft); }

/* ── ENTRY CARDS — firing record cards from a card index ── */
.entries-list { padding:14px 12px; display:flex; flex-direction:column; gap:13px; }
.entry-card {
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--margin-red);
  border-radius:3px; overflow:hidden; cursor:pointer; position:relative;
  display:flex; align-items:stretch;
  box-shadow:0 1px 0 #fff inset, 0 1px 2px rgba(42,28,16,0.1), 0 10px 18px -14px rgba(42,28,16,0.45);
  transition:transform .12s ease, box-shadow .18s ease;
}
/* punch-hole reminiscent of a filed index card */
.entry-card::after { content:""; position:absolute; left:9px; top:10px; width:7px; height:7px; border-radius:50%; background:var(--paper-2); box-shadow:inset 0 1px 1px rgba(42,28,16,0.35); }
.entry-card:active { transform:translateY(1px) scale(0.997); }
@media (hover:hover) {
  .entry-card:hover { box-shadow:0 1px 0 #fff inset, 0 2px 4px rgba(42,28,16,0.12), 0 16px 24px -14px rgba(42,28,16,0.5), 0 0 0 1px var(--kiln-glow-soft); transform:translateY(-1px); }
}
.entry-main { flex:1; min-width:0; padding:12px 12px 11px 22px; display:flex; flex-direction:column; gap:7px; }
.entry-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.code { font-family:var(--font); font-weight:700; font-size:21px; color:var(--ink); line-height:1.05; letter-spacing:-0.01em; }
.entry-sub { font-family:var(--type); font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.entry-foot { margin-top:auto; padding-top:7px; border-top:1px dashed var(--line); display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-family:var(--type); font-size:11px; color:var(--smoke); letter-spacing:0.02em; }
.foot-meta { color:var(--ink-soft); }
.foot-meta.rating { color:var(--margin-red); }

/* the framed thumbnail — pasted photo, or a hand-drawn studio sketch */
.entry-thumb { width:98px; flex-shrink:0; border-left:1px solid var(--line); background:var(--paper-2); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.entry-thumb.has-photo { padding:0; }
.entry-thumb.has-photo img { width:100%; height:100%; object-fit:cover; }
.entry-thumb.is-sketch { color:var(--sketch); padding:8px; background-image:repeating-linear-gradient(var(--paper-2) 0 13px, rgba(149,129,95,0.08) 13px 14px); }
.entry-thumb .sketch { width:100%; height:100%; }

/* stamped type tags */
.type-badge { font-family:var(--type); font-size:9px; text-transform:uppercase; letter-spacing:0.12em; padding:3px 8px; border-radius:3px; font-weight:700; flex-shrink:0; border:1.3px solid currentColor; background:transparent; transform:rotate(-1deg); }
.badge-tile { color:#8a5a16; }
.badge-firing { color:#9a4a14; }
.badge-piece { color:#566b34; }
.badge-bisque { color:#6c5a3c; }
.badge-glaze { color:var(--margin-red); }
.badge-earthenware { color:#9a4420; }
.badge-initial { color:#705438; }

.empty-state { text-align:center; padding:48px 28px 60px; color:var(--smoke); }
.empty-state .empty-sketch { width:120px; height:140px; margin:0 auto 16px; color:var(--sketch); opacity:0.5; }
.empty-state .empty-sketch .sketch { width:100%; height:100%; }
.empty-state p { font-family:var(--type); font-size:13px; line-height:1.7; }

/* ── STATUS STAMP ── */
.status-pill { display:inline-block; font-family:var(--type); font-size:9px; text-transform:uppercase; letter-spacing:0.1em; padding:3px 8px; border-radius:3px; font-weight:700; border:1.3px solid currentColor; background:transparent; transform:rotate(-1deg); }
.s-making    { color:#8a6a1d; }
.s-drying    { color:#945412; }
.s-bisque    { color:#6c5a3c; }
.s-glazed    { color:#566b34; }
.s-fired     { color:#a0440f; }
.s-finished  { color:#46662e; }
.s-reclaimed { color:#75543f; }

/* ── FAB ── */
.fab {
  position:fixed; bottom:24px; right:max(16px, calc(50% - 240px + 16px)); width:58px; height:58px; border-radius:50%;
  background:radial-gradient(circle at 35% 28%, #ec8c3a, var(--ember) 52%, var(--ember-deep));
  color:#fff5ea; font-size:30px; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px -4px var(--kiln-glow), 0 2px 6px rgba(42,28,16,0.32), 0 0 0 1px rgba(152,68,18,0.45);
  z-index:200; line-height:1; transition:transform .1s; }
.fab:active { transform:scale(0.92); }
.fab-row { display:flex; align-items:center; gap:10px; }
.fab-label { font-family:var(--type); background:var(--kiln); color:#f3e6cf; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:6px 12px; border-radius:3px; }
.fab-mini { width:46px; height:46px; border-radius:50%; color:#fff; border:1.5px solid rgba(255,255,255,0.25); font-family:var(--font); font-weight:700; font-size:20px; cursor:pointer; box-shadow:0 3px 10px -2px rgba(0,0,0,0.3); }

/* ── MODAL ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(28,18,8,0.7); z-index:300; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.modal-overlay.open { display:block; }
.modal { background:var(--cream); margin:16px auto; max-width:480px; border-radius:5px; overflow:hidden; min-height:calc(100vh - 32px); box-shadow:0 24px 60px -20px rgba(10,6,2,0.8); animation:pageIn .3s ease both; }
.modal-top { background:linear-gradient(180deg,#f7f0e0,#f1e8d4); color:var(--ink); padding:15px 16px; display:flex; align-items:center; justify-content:space-between; position:relative; border-bottom:2px solid var(--margin-red); }
.modal-top h2 { font-family:var(--font); font-size:20px; font-weight:700; text-transform:uppercase; letter-spacing:0.01em; }
.modal-top button { background:none; border:none; color:var(--margin-red); font-size:22px; cursor:pointer; padding:4px 8px; line-height:1; }
.modal-body { padding:18px 16px; }
.form-section { margin-bottom:20px; }
.form-section label { display:block; font-size:10px; text-transform:uppercase; letter-spacing:0.14em; color:var(--smoke); margin-bottom:6px; font-weight:700; }
.form-section input,.form-section select,.form-section textarea { width:100%; border:1px solid var(--line); border-radius:4px; padding:10px 12px; font-size:15px; font-family:var(--sans); background:#fffdf7; color:var(--ink); outline:none; -webkit-appearance:none; transition:border-color .15s, box-shadow .15s; }
.form-section input:focus,.form-section select:focus,.form-section textarea:focus { border-color:var(--margin-red); box-shadow:0 0 0 3px var(--kiln-glow-soft); }
.form-section textarea { min-height:80px; resize:vertical; line-height:1.5; }
.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.glaze-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.glaze-chip { padding:5px 11px; border-radius:3px; font-size:12px; font-family:var(--type); border:1.3px solid var(--line); background:#fffdf7; cursor:pointer; color:var(--ink-soft); user-select:none; transition:all .14s; text-transform:uppercase; letter-spacing:0.04em; }
.glaze-chip.selected,.glaze-chip.on { background:var(--red-wash); border-color:var(--margin-red); color:var(--margin-red); font-weight:700; }

/* ── GLAZE PICKER (modal) ─────────────────────────────────── */
.glaze-picker { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.glaze-picker-search { width:100%; padding:8px 11px; border:1.3px solid var(--line); border-radius:4px; font-size:14px; font-family:var(--sans); background:#fffdf7; color:var(--ink); outline:none; -webkit-appearance:none; box-sizing:border-box; transition:border-color .15s,box-shadow .15s; }
.glaze-picker-search:focus { border-color:var(--margin-red); box-shadow:0 0 0 3px var(--kiln-glow-soft); }
.glaze-picker-tabs { display:flex; background:var(--paper-2); border:1px solid var(--ash); border-radius:4px; padding:2px; gap:2px; }
.glaze-tab { flex:1; padding:5px 0; border-radius:3px; border:none; background:none; color:var(--smoke); font-size:11px; font-family:var(--type); font-weight:700; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; transition:all .14s; }
.glaze-tab.active { background:#fffdf7; color:var(--ink); box-shadow:0 1px 3px rgba(42,28,16,.14); }
.glaze-picker-empty { font-family:var(--type); font-size:12px; color:var(--smoke); padding:6px 0; display:block; }

/* ── GLAZE LAYER STACK ────────────────────────────────────── */
.glaze-layer-stack-wrap { border-top:1px solid var(--line); margin-top:4px; padding-top:8px; }
.glaze-layer-label { font-family:var(--type); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--smoke); margin-bottom:6px; }
.glaze-layer-stack { display:flex; flex-direction:column; gap:4px; }
.layer-row { display:flex; align-items:center; gap:6px; }
.layer-move-btn { border:1px solid var(--line); background:none; border-radius:3px; width:22px; height:22px; cursor:pointer; font-size:12px; color:var(--smoke); line-height:1; padding:0; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.layer-move-btn:disabled { opacity:.25; cursor:default; }
.layer-move-btn:not(:disabled):hover { background:var(--paper-2); color:var(--ink); }
.layer-num { font-family:var(--type); font-size:10px; font-weight:700; color:var(--smoke); min-width:14px; text-align:right; flex-shrink:0; }
.layer-name { flex:1; font-size:13px; font-family:var(--sans); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layer-remove-btn { border:none; background:none; color:var(--smoke); font-size:16px; cursor:pointer; line-height:1; padding:0 2px; flex-shrink:0; }
.layer-remove-btn:hover { color:var(--margin-red); }
.glaze-layer-empty { font-family:var(--type); font-size:12px; color:var(--smoke); font-style:italic; display:block; }

/* ── SUBTYPE BADGE (settings list) ───────────────────────── */
.sli-subtype-badge { display:inline-block; font-family:var(--type); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--smoke); border:1px solid var(--line); border-radius:2px; padding:1px 5px; vertical-align:middle; margin-left:5px; }

/* ── LAYER NUMBER ON DETAIL GLAZE TAGS ───────────────────── */
.layer-num-inline { font-family:var(--type); font-size:9px; font-weight:700; color:var(--smoke); margin-right:4px; opacity:.7; }
.rating-row { display:flex; gap:6px; flex-wrap:wrap; }
.rating-btn { padding:7px 13px; border-radius:4px; border:1.3px solid var(--line); background:#fffdf7; color:var(--smoke); cursor:pointer; font-size:13px; font-family:var(--sans); font-weight:600; transition:all .14s; }
.rating-btn.active { background:var(--red-wash); border-color:var(--margin-red); color:var(--margin-red); }
.photo-upload-area { border:1.6px dashed var(--line); border-radius:5px; padding:18px; text-align:center; cursor:pointer; background:rgba(255,253,247,0.6); position:relative; transition:border-color .15s; }
.photo-upload-area:active { border-color:var(--margin-red); }
.photo-upload-area input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.photo-upload-area .icon { font-size:26px; margin-bottom:6px; opacity:0.34; }
.photo-upload-area p { font-family:var(--type); font-size:12px; color:var(--smoke); }
.photo-previews { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.photo-thumb { width:72px; height:72px; object-fit:cover; border-radius:3px; border:1px solid var(--line); }
.photo-thumb-wrap { position:relative; display:inline-block; }
.photo-thumb-wrap .del-photo { position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:var(--warn); color:white; border:none; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; }
.save-btn { width:100%; padding:14px; background:linear-gradient(180deg,var(--ember),var(--ember-deep)); color:#fdf3e6; border:none; border-radius:5px; font-size:15px; font-family:var(--font); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; cursor:pointer; margin-top:8px; box-shadow:0 1px 0 rgba(255,220,180,0.3) inset, 0 5px 16px -6px var(--kiln-glow); transition:transform .08s; }
.save-btn:active { transform:translateY(1px); }
.save-btn:disabled { background:#c9bda4; box-shadow:none; color:#f3ece0; }
.delete-btn { width:100%; padding:11px; background:none; color:var(--warn); border:1.3px solid var(--warn); border-radius:5px; font-size:14px; font-weight:600; font-family:var(--type); text-transform:uppercase; letter-spacing:0.06em; cursor:pointer; margin-top:8px; }
.type-toggle { display:flex; background:var(--paper-2); border:1px solid var(--ash); border-radius:5px; padding:3px; gap:2px; margin-bottom:4px; }
.type-toggle button { flex:1; padding:8px 0; border-radius:3px; border:none; background:none; color:var(--smoke); font-size:12px; font-family:var(--type); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; cursor:pointer; transition:all .14s; }
.type-toggle button.active { background:#fffdf7; color:var(--ink); box-shadow:0 1px 3px rgba(42,28,16,0.16); }
.section-divider { font-family:var(--type); font-size:10px; text-transform:uppercase; letter-spacing:0.16em; color:var(--margin-red); font-weight:700; padding:8px 0 6px; border-top:1px solid var(--ash); margin-bottom:16px; }
.hint { font-family:var(--type); font-size:12px; color:var(--smoke); margin-top:5px; line-height:1.5; }

/* ── FIRING PICKER BUTTON ── */
.firing-picker-btn { width:100%; padding:11px 14px; border:1.3px solid var(--line); border-radius:4px; background:#fffdf7; color:var(--ink-soft); font-size:14px; font-family:var(--type); text-align:left; cursor:pointer; display:flex; align-items:center; justify-content:space-between; transition:all .14s; }
.firing-picker-btn.selected { border-color:var(--margin-red); color:var(--margin-red); background:var(--red-wash); }
.firing-picker-btn span.arrow { color:var(--smoke); font-size:18px; }
.firing-picker-btn.selected span.arrow { color:var(--margin-red); }

/* ── FIRING PICKER MODAL ── */
#firingPickerOverlay { display:none; position:fixed; inset:0; background:rgba(28,18,8,0.7); z-index:500; overflow-y:auto; }
#firingPickerOverlay.open { display:block; }
#firingPickerModal { background:var(--cream); margin:16px auto; max-width:480px; border-radius:5px; overflow:hidden; box-shadow:0 24px 60px -20px rgba(10,6,2,0.8); }
.picker-list { padding:8px 12px 20px; display:flex; flex-direction:column; gap:8px; }
.picker-item { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--margin-red); border-radius:3px; padding:12px 14px; cursor:pointer; box-shadow:0 1px 2px rgba(42,28,16,0.08); transition:transform .1s; }
.picker-item:active { transform:translateY(1px); }
.picker-item .pi-ref { font-family:var(--font); font-weight:700; font-size:16px; margin-bottom:2px; }
.picker-item .pi-sub { font-family:var(--type); font-size:12px; color:var(--smoke); }
.picker-clear { margin:0 12px 8px; padding:10px; border:1.3px solid var(--line); border-radius:4px; background:#fffdf7; color:var(--smoke); font-size:13px; font-family:var(--type); cursor:pointer; width:calc(100% - 24px); text-align:center; text-transform:uppercase; letter-spacing:0.06em; }

/* ── BULK LINK ── */
.bulk-link-btn { width:100%; padding:12px; border:1.4px dashed var(--margin-red); border-radius:5px; background:var(--red-wash); color:var(--margin-red); font-size:12px; font-family:var(--type); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; cursor:pointer; transition:transform .08s; }
.bulk-link-btn:active { transform:translateY(1px); }
.bulk-list { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.bulk-item { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:4px; padding:11px 13px; cursor:pointer; transition:all .12s; }
.bulk-item.selected { border-color:var(--margin-red); background:var(--red-wash); }
.bulk-item .bulk-check { width:22px; height:22px; flex-shrink:0; border:1.3px solid var(--line); border-radius:4px; background:#fffdf7; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; }
.bulk-item.selected .bulk-check { background:var(--margin-red); border-color:var(--margin-red); }
.bulk-item .bulk-meta { min-width:0; }
.bulk-item .pi-ref { font-family:var(--font); font-weight:700; font-size:15px; }
.bulk-item .pi-sub { font-family:var(--type); font-size:12px; color:var(--smoke); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bulk-badge { font-family:var(--type); font-size:10px; text-transform:uppercase; letter-spacing:0.07em; color:var(--smoke); font-weight:700; border:1px solid var(--line); border-radius:3px; padding:1px 7px; margin-left:7px; vertical-align:middle; }

/* ── PIECE: next number stamp plate ── */
.next-ref-banner {
  background:var(--kiln); color:#f3e6cf; border-radius:4px; padding:15px 16px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden;
  box-shadow:0 6px 18px -12px rgba(20,12,4,0.7);
}
.next-ref-banner::after { content:""; position:absolute; inset:5px; border:1px solid rgba(243,230,207,0.18); border-radius:3px; pointer-events:none; }
.next-ref-banner .label { font-family:var(--type); font-size:10px; text-transform:uppercase; letter-spacing:0.16em; opacity:0.62; margin-bottom:3px; }
.next-ref-banner .ref { font-family:var(--font); font-weight:700; font-size:30px; letter-spacing:0.02em; color:var(--clay-mid); }
.form-prefix-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ── DETAIL — an open ledger page ── */
.detail-overlay { display:none; position:fixed; inset:0; background:#241a0f; z-index:250; overflow-y:auto; }
.detail-overlay.open { display:block; }
/* keep the ledger page in the same centred column as the rest of the app */
.detail-shell { max-width:480px; margin:0 auto; min-height:100vh; background:var(--cream); box-shadow:0 0 60px rgba(20,12,4,0.5); }
.detail-top { background:linear-gradient(180deg,#f7f0e0,#f1e8d4); color:var(--ink); padding:15px 16px; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:10; border-bottom:2px solid var(--margin-red); }
.detail-top button { background:none; border:none; color:var(--margin-red); font-size:24px; cursor:pointer; padding:0 4px; line-height:1; }
.detail-top h2 { font-family:var(--font); font-size:20px; font-weight:700; text-transform:uppercase; letter-spacing:0.01em; flex:1; }
.detail-body {
  padding:20px 18px 18px 26px; position:relative;
  background-image:repeating-linear-gradient(var(--cream) 0 31px, var(--rule) 31px 32px);
}
.detail-body::before { content:""; position:absolute; left:14px; top:0; bottom:0; width:1.5px; background:var(--margin-red); opacity:0.5; }
.detail-meta-row { position:relative; display:flex; align-items:flex-start; justify-content:flex-start; gap:10px; margin-bottom:16px; min-height:30px; }
.detail-photos { display:flex; gap:8px; overflow-x:auto; margin-bottom:18px; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.detail-photos img { height:184px; width:auto; border-radius:3px; border:1px solid var(--line); flex-shrink:0; box-shadow:0 4px 12px -7px rgba(42,28,16,0.5); }

/* glued-in studio sketch when there is no photo */
.detail-sketch-banner {
  position:relative; margin-bottom:18px; padding:14px; border:1px solid var(--line);
  border-radius:3px; background:var(--paper-2);
  background-image:repeating-linear-gradient(var(--paper-2) 0 13px, rgba(149,129,95,0.07) 13px 14px);
  display:flex; flex-direction:column; align-items:center; color:var(--sketch);
  box-shadow:0 2px 8px -6px rgba(42,28,16,0.4);
}
.detail-sketch-banner .sketch { width:auto; height:180px; }
.detail-sketch-banner .sketch-caption { font-family:var(--type); font-size:10px; text-transform:uppercase; letter-spacing:0.12em; color:var(--smoke); margin-top:8px; }

.detail-section { margin-bottom:18px; }
.detail-section h3 { font-family:var(--type); font-size:10px; text-transform:uppercase; letter-spacing:0.14em; color:var(--margin-red); margin-bottom:8px; font-weight:700; }
.detail-section p { font-size:15px; line-height:1.55; color:var(--ink); }

/* glaze names as stamped tags */
.glaze-tag { display:inline-block; font-family:var(--type); background:transparent; color:var(--margin-red); padding:3px 9px; border-radius:3px; font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em; margin:3px 4px 3px 0; border:1.2px solid var(--red-soft); font-weight:700; }

/* ledger key/value rows */
.cone-table { width:100%; border-collapse:collapse; }
.cone-table td { padding:7px 2px; font-size:14px; border-bottom:1px dotted var(--line); vertical-align:baseline; color:var(--ink); }
.cone-table td:first-child { font-family:var(--type); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--smoke); width:118px; }

/* field notes — pasted observations, slightly handwritten */
.field-note { position:relative; background:#fcf8ee; border:1px solid var(--line); border-left:3px solid var(--margin-red); border-radius:3px; padding:11px 13px; margin:6px 0; box-shadow:0 1px 3px -1px rgba(42,28,16,0.14); }
.field-note p { font-size:14.5px; line-height:1.55; color:var(--ink); white-space:pre-wrap; }
.field-note.cone { padding-top:9px; }
.field-note.cone p { font-family:var(--hand); font-size:19px; line-height:1.3; color:#4a3922; }
.field-note .fn-label { display:inline-block; font-family:var(--type); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--margin-red); border:1px solid var(--red-soft); border-radius:2px; padding:1px 6px; margin-bottom:6px; }
.field-note.warn { border-left-color:var(--warn); }
.field-note.warn p { color:#7a3328; }
.field-pre { white-space: pre-wrap; }
.field-pre-top { margin-top: 8px; white-space: pre-wrap; }
.glaze-tags-row { margin-bottom: 8px; }
.cones-used { font-family:var(--type); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--smoke); margin-bottom:10px; }

/* rubber stamp */
.stamp {
  position:absolute; right:0; top:-4px; z-index:2;
  width:86px; height:86px; border-radius:50%;
  border:2px solid var(--margin-red); color:var(--margin-red);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  transform:rotate(-8deg); opacity:0.74; mix-blend-mode:multiply; pointer-events:none;
  box-shadow:inset 0 0 0 2.5px var(--cream), inset 0 0 0 3.5px var(--margin-red);
}
.stamp .stamp-top,.stamp .stamp-bot { font-family:var(--type); font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; line-height:1.2; }
.stamp .stamp-mid { font-family:var(--font); font-weight:700; font-size:19px; line-height:1; margin:2px 0; }
.stamp .stamp-bot { opacity:0.85; }

.edit-fab { position:fixed; bottom:24px; right:max(16px, calc(50% - 240px + 16px)); background:linear-gradient(180deg,var(--ember),var(--ember-deep)); color:#fdf3e6; border:none; border-radius:6px; padding:13px 24px; font-size:14px; cursor:pointer; font-family:var(--font); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; z-index:260; box-shadow:0 5px 16px -6px var(--kiln-glow), 0 2px 6px rgba(42,28,16,0.3); }

/* ── LINKED RECORDS ── */
.linked-list { display:flex; flex-direction:column; gap:6px; }
.linked-chip { display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--margin-red); border-radius:3px; padding:7px 11px; font-size:13px; cursor:pointer; transition:background .14s; }
.linked-chip:active { background:var(--red-wash); }
.linked-chip .lc-code { font-family:var(--font); font-weight:700; font-size:14px; }
.linked-chip .lc-role { font-family:var(--type); font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--smoke); }

/* ── PIECE TIMELINE ── */
.timeline { margin-top:4px; }
.timeline-stage { border-left:2px solid var(--line); margin-left:8px; padding-left:16px; padding-bottom:16px; position:relative; }
.timeline-stage:last-child { padding-bottom:0; }
.timeline-dot { position:absolute; left:-6px; top:2px; width:10px; height:10px; border-radius:50%; background:var(--ash); border:2px solid var(--line); }
.timeline-dot.done { background:var(--clay); border-color:var(--clay); }
.timeline-dot.active { background:var(--margin-red); border-color:var(--margin-red); box-shadow:0 0 0 4px var(--kiln-glow-soft); }
.timeline-dot.reclaimed { background:var(--smoke); border-color:var(--smoke); }
.timeline-stage-title { font-family:var(--type); font-size:10px; text-transform:uppercase; letter-spacing:0.12em; color:var(--margin-red); font-weight:700; margin-bottom:6px; }
.timeline-content { font-size:14px; line-height:1.6; color:var(--ink); }
.timeline-content .dim { color:var(--smoke); font-size:13px; }

/* ── STAGE UPDATE ── */
.stage-btn-row { display:flex; gap:8px; flex-wrap:wrap; }
.stage-btn { padding:8px 14px; border-radius:4px; border:1.3px solid var(--line); background:#fffdf7; color:var(--ink-soft); cursor:pointer; font-size:12px; font-family:var(--type); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; transition:all .14s; }
.stage-btn.active { background:var(--red-wash); border-color:var(--margin-red); color:var(--margin-red); }
.stage-btn.reclaim { border-color:#d6bca8; color:#75543f; background:#f3e9e1; }
.stage-btn.reclaim.active { background:#ecdccf; border-color:#a8806a; }

/* ── SETTINGS ── */
.settings-card { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--margin-red); border-radius:3px; padding:16px; display:flex; flex-direction:column; gap:10px; box-shadow:0 1px 2px rgba(42,28,16,0.1), 0 8px 16px -14px rgba(42,28,16,0.45); }
.settings-title { font-size:15px; font-weight:700; color:var(--ink); font-family:var(--font); text-transform:uppercase; letter-spacing:0.01em; }
.settings-desc { font-family:var(--type); font-size:12.5px; color:var(--smoke); line-height:1.6; }
.settings-btn { padding:11px 16px; border-radius:4px; border:1.3px solid var(--margin-red); background:var(--red-wash); color:var(--margin-red); font-size:12px; font-family:var(--type); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; cursor:pointer; width:100%; text-align:center; transition:box-shadow .14s; }
.settings-btn:active { box-shadow:0 0 0 3px var(--kiln-glow-soft); }
.settings-btn.danger { border-color:var(--warn); background:var(--red-wash); color:var(--warn); }
.settings-list-item { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }
.settings-list-item:last-child { border-bottom:none; }
.sli-code { font-family:var(--type); font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--smoke); min-width:44px; flex-shrink:0; }
.sli-name { flex:1; }
.sli-actions { display:flex; gap:2px; flex-shrink:0; }
.sli-actions button { background:none; border:none; color:var(--smoke); cursor:pointer; font-size:13px; padding:2px 6px; border-radius:3px; transition:color .12s; }
.sli-actions button:hover { color:var(--warn); }
.settings-add-form { display:flex; gap:6px; margin-top:4px; flex-wrap:wrap; align-items:center; }
.settings-add-form input { flex:1; min-width:80px; padding:8px 10px; border:1.3px solid var(--line); border-radius:4px; font-size:13px; font-family:var(--sans); background:#fffdf7; color:var(--ink); }
.settings-edit-form { display:flex; gap:6px; flex:1; flex-wrap:wrap; align-items:center; padding:4px 0; }
.settings-edit-form input { flex:1; min-width:70px; padding:6px 8px; border:1.3px solid var(--margin-red); border-radius:4px; font-size:13px; font-family:var(--sans); background:#fffdf7; color:var(--ink); }
.settings-empty { font-size:12px; color:var(--smoke); padding:6px 0; }
.settings-nav-list { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:3px; overflow:hidden; box-shadow:0 1px 2px rgba(42,28,16,0.1), 0 8px 16px -14px rgba(42,28,16,0.45); }
.settings-nav-btn { display:flex; justify-content:space-between; align-items:center; width:100%; padding:15px 16px; background:var(--card); border:none; border-bottom:1px solid var(--line); font-size:14px; font-family:var(--font); font-weight:600; color:var(--ink); cursor:pointer; text-align:left; }
.settings-nav-btn:last-child { border-bottom:none; }
.settings-nav-btn:active { background:var(--paper); }
.snb-arrow { font-size:18px; color:var(--smoke); font-weight:300; }
.settings-back-btn { display:flex; align-items:center; gap:4px; background:none; border:none; color:var(--margin-red); font-size:12px; font-family:var(--type); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; cursor:pointer; padding:0 0 12px 0; }
.unit-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); }
.unit-row:last-child { border-bottom:none; }
.unit-row-label { font-size:13px; font-family:var(--type); color:var(--ink); }
.unit-toggle { display:flex; border:1.3px solid var(--line); border-radius:4px; overflow:hidden; }
.unit-btn { padding:6px 12px; background:transparent; border:none; border-right:1px solid var(--line); font-size:12px; font-family:var(--type); font-weight:600; color:var(--smoke); cursor:pointer; transition:background .12s,color .12s; }
.unit-btn:last-child { border-right:none; }
.unit-btn.active { background:var(--margin-red); color:#fff; }

/* ── TILE CSV IMPORT ── */
.modal--wide { max-width:min(95vw, 860px); }
.imp-toolbar { padding:0 12px 6px; display:flex; justify-content:flex-end; }
.imp-open-btn { background:none; border:1.3px solid var(--line); color:var(--smoke); font-size:12px; font-family:var(--sans); padding:5px 12px; border-radius:4px; cursor:pointer; transition:border-color .12s,color .12s; }
.imp-open-btn:hover { border-color:var(--margin-red); color:var(--margin-red); }
.sketch-add-btn { width:100%; padding:10px 14px; border:1.3px dashed var(--line); border-radius:4px; background:#fffdf7; color:var(--smoke); font-size:13px; font-family:var(--type); cursor:pointer; transition:all .14s; }
.sketch-add-btn:hover { border-color:var(--margin-red); color:var(--margin-red); }
.imp-file-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.imp-file-label { display:inline-block; background:var(--margin-red); color:#fff; font-size:13px; font-family:var(--sans); padding:8px 16px; border-radius:4px; cursor:pointer; transition:background .12s; }
.imp-file-label:hover { background:var(--ember-deep); }
.imp-template-btn { background:none; border:1.3px solid var(--line); color:var(--smoke); font-size:12px; font-family:var(--sans); padding:6px 12px; border-radius:4px; cursor:pointer; transition:color .12s,border-color .12s; }
.imp-template-btn:hover { color:var(--ink); border-color:var(--smoke); }
.imp-hint { font-size:12px; color:var(--smoke); line-height:1.5; margin-bottom:12px; }
.imp-hint code { font-family:var(--type); font-size:11px; background:var(--paper-2); padding:1px 4px; border-radius:2px; }
.imp-error { font-size:13px; color:var(--warn); min-height:0; margin-bottom:6px; }
.imp-table-wrap { overflow-x:auto; margin-bottom:10px; border:1px solid var(--rule); border-radius:4px; }
.imp-table { border-collapse:collapse; font-size:12px; white-space:nowrap; }
.imp-table th { background:var(--paper-2); padding:5px 6px; text-align:left; font-family:var(--sans); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--smoke); border-bottom:1px solid var(--rule); white-space:nowrap; }
.imp-table td { padding:3px 4px; border-bottom:1px solid var(--rule); vertical-align:middle; }
.imp-table tr:last-child td { border-bottom:none; }
.imp-cell { width:80px; padding:4px 6px; border:1px solid var(--line); border-radius:3px; font-size:12px; font-family:var(--sans); background:#fffdf7; color:var(--ink); }
.imp-cell:focus { border-color:var(--margin-red); outline:none; }
.imp-del-btn { background:none; border:none; color:var(--smoke); font-size:15px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:3px; }
.imp-del-btn:hover { color:var(--warn); }
.imp-status { text-align:center; padding:0 6px; }
.imp-warn { color:#a06020; cursor:help; font-size:14px; }
.imp-ok { color:var(--ok); font-size:13px; }
.imp-count { font-size:12px; color:var(--smoke); text-align:right; padding:2px 0 10px; }
.imp-actions { display:flex; gap:10px; align-items:center; margin-top:4px; }
.imp-cancel-btn { background:none; border:none; color:var(--smoke); font-size:13px; font-family:var(--sans); cursor:pointer; padding:4px 0; }
.imp-cancel-btn:hover { color:var(--ink); }

/* ── MISC ── */
.spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(176,74,51,0.25); border-top-color:var(--margin-red); border-radius:50%; animation:spin 0.7s linear infinite; vertical-align:middle; margin-right:6px; }
.spinner.dark { border-color:rgba(176,74,51,0.22); border-top-color:var(--margin-red); }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-row { text-align:center; padding:44px; color:var(--smoke); font-family:var(--type); font-size:13px; }

/* sketch line weights */
.sketch .sk-frame { stroke-width:1.9; }
.sketch .sk-line { stroke-width:1.3; }

/* ── SKETCH DRAW MODAL ── */
.modal--sketch { min-height:auto; display:flex; flex-direction:column; }
.sketch-toolbar {
  background:var(--paper-2); padding:8px 12px 10px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
.sketch-tools,.sketch-colors,.sketch-sizes,.sketch-actions { display:flex; gap:5px; align-items:center; }
.sketch-divider { width:1px; height:24px; background:var(--line); flex-shrink:0; }
.sk-tool {
  width:34px; height:34px; border-radius:4px; border:1.3px solid var(--line);
  background:#fffdf7; color:var(--ink); font-size:17px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .14s;
}
.sk-tool.active { background:var(--red-wash); border-color:var(--margin-red); }
.sk-color {
  width:22px; height:22px; border-radius:50%; cursor:pointer; flex-shrink:0;
  border:2px solid var(--line); transition:transform .1s, border-color .12s;
}
.sk-color.active { border-color:var(--margin-red); transform:scale(1.25); }
.sk-size {
  width:28px; height:28px; border-radius:4px; border:1.3px solid var(--line);
  background:#fffdf7; color:var(--smoke); font-size:10px; font-family:var(--type);
  font-weight:700; text-transform:uppercase; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .14s;
}
.sk-size.active { background:var(--red-wash); border-color:var(--margin-red); color:var(--margin-red); }
.sketch-actions { margin-left:auto; }
.sk-action {
  padding:5px 9px; border-radius:4px; border:1.3px solid var(--line);
  background:#fffdf7; color:var(--smoke); font-size:13px; font-family:var(--type);
  font-weight:700; cursor:pointer; transition:all .14s; line-height:1;
}
.sk-action:active { border-color:var(--margin-red); color:var(--margin-red); }
.sketch-canvas-wrap {
  padding:12px; background:var(--paper-2); min-height:300px;
  display:flex; align-items:flex-start; justify-content:center;
}
#sketchCanvas {
  display:block; background:white; border-radius:3px; touch-action:none;
  border:1px solid var(--line); cursor:crosshair;
  box-shadow:0 2px 12px -5px rgba(42,28,16,0.4);
}
.sketch-save-row { padding:14px 16px; background:var(--cream); }

/* ── SKETCH SECTION IN DETAIL ── */
.sketch-section-head {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.sketch-section-head h3 { margin-bottom:0; }
.add-sketch-btn {
  padding:5px 10px; border-radius:3px; border:1.3px solid var(--margin-red);
  background:var(--red-wash); color:var(--margin-red); font-size:10px;
  font-family:var(--type); font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; cursor:pointer; transition:box-shadow .12s; flex-shrink:0;
}
.add-sketch-btn:active { box-shadow:0 0 0 3px var(--kiln-glow-soft); }
.sketch-thumbs-row {
  display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;
  -webkit-overflow-scrolling:touch;
}
.sketch-thumb-item { position:relative; flex-shrink:0; }
.sketch-thumb-item img {
  width:84px; height:84px; object-fit:cover; border-radius:3px;
  border:1px solid var(--line); display:block; cursor:pointer;
}
.del-sketch-btn {
  position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
  background:var(--warn); color:white; border:none; font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
}

/* ── COVER IMAGE PICKER ── */
.cover-picker { display:flex; gap:7px; flex-wrap:wrap; margin-top:6px; }
.cover-picker-item {
  position:relative; cursor:pointer; border-radius:3px; overflow:hidden;
  border:2.5px solid transparent; transition:border-color .14s;
}
.cover-picker-item.selected { border-color:var(--margin-red); }
.cover-picker-item img { width:72px; height:72px; object-fit:cover; display:block; }
.cover-picker-check {
  position:absolute; bottom:3px; right:3px; width:18px; height:18px; border-radius:50%;
  background:var(--margin-red); color:white; font-size:11px; font-weight:700;
  display:none; align-items:center; justify-content:center; pointer-events:none;
}
.cover-picker-item.selected .cover-picker-check { display:flex; }

/* ── CONFIRM DIALOG ── */
.confirm-overlay { display:none; position:fixed; inset:0; background:rgba(28,18,8,0.7); z-index:600; align-items:center; justify-content:center; padding:16px; }
.confirm-overlay.open { display:flex; }
.confirm-sheet { background:var(--cream); border-radius:5px; padding:24px 22px 18px; max-width:340px; width:100%; box-shadow:0 24px 60px -20px rgba(10,6,2,0.8); animation:pageIn .25s ease both; }
.confirm-title { font-family:var(--font); font-size:18px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.confirm-msg { font-family:var(--sans); font-size:14px; color:var(--ink-soft); line-height:1.55; margin-bottom:18px; }
.confirm-type-wrap { margin-bottom:14px; }
.confirm-type-label { font-family:var(--type); font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--smoke); display:block; margin-bottom:6px; }
.confirm-type-input { width:100%; border:1px solid var(--line); border-radius:4px; padding:9px 11px; font-size:14px; font-family:var(--type); background:#fffdf7; color:var(--ink); outline:none; -webkit-appearance:none; }
.confirm-type-input:focus { border-color:var(--margin-red); box-shadow:0 0 0 3px var(--kiln-glow-soft); }
.confirm-btns { display:flex; gap:8px; }
.confirm-cancel { flex:1; padding:11px; border:1.3px solid var(--line); border-radius:4px; background:#fffdf7; color:var(--ink-soft); font-size:13px; font-family:var(--type); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; cursor:pointer; }
.confirm-ok { flex:1; padding:11px; border:none; border-radius:4px; background:linear-gradient(180deg,var(--ember),var(--ember-deep)); color:#fdf3e6; font-size:13px; font-family:var(--type); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; cursor:pointer; }
.confirm-ok.danger { background:var(--warn); }
.confirm-ok:disabled { background:#c9bda4; cursor:not-allowed; }

/* ── EMPTY STATE ACTION ── */
.empty-action-btn { margin-top:14px; padding:10px 20px; border:1.3px solid var(--margin-red); border-radius:4px; background:var(--red-wash); color:var(--margin-red); font-size:12px; font-family:var(--type); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; cursor:pointer; }

/* ── IMPORT WARNING VISIBLE TEXT ── */
.imp-warn { color:#a06020; font-size:12px; display:flex; flex-direction:column; gap:2px; }
.imp-warn-icon { font-size:14px; }
.imp-warn-detail { font-size:10px; font-family:var(--type); white-space:normal; line-height:1.4; max-width:160px; }
.imp-status { text-align:left; padding:3px 6px; vertical-align:top; }

/* ── RESPONSIVE ── */
@media (min-width: 560px) {
  body { max-width:560px; }
}
@media (min-width: 700px) {
  body { max-width:640px; }
  .modal { max-width:640px; }
  #firingPickerModal { max-width:640px; }
  .row-2 { grid-template-columns:1fr 1fr; }
}