/* Odd Barnacle — plain, mobile-first styles */
:root{
  --ink:#1A1A17; --muted:#6B6B62; --line:#E3E2DC; --paper:#FAFAF8; --card:#FFFFFF;
  --accent:#33617A; --accent-weak:#E7EFF3; --bad:#B91C1C; --ok:#3F6212;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);margin:0;line-height:1.5;-webkit-text-size-adjust:100%}
.wrap{max-width:620px;margin:0 auto;padding:18px 16px 64px}

header.top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:6px 0 18px}
header.top h1{font-size:19px;margin:0;letter-spacing:-0.01em}
header.top a.back{font-size:13px;color:var(--accent);text-decoration:none}
.subtle{color:var(--muted);font-size:13px}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 12px}

label{display:block;font-size:13px;font-weight:500;margin:0 0 4px}
input[type=text],textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid #CFCEC6;border-radius:8px;padding:11px 12px;margin-bottom:11px;
}
textarea{min-height:64px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}

button{
  font-family:inherit;font-size:15px;font-weight:600;border-radius:8px;padding:12px 16px;
  border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;width:100%;
}
button:active{opacity:.9}
button.ghost{background:#fff;color:var(--ink);border-color:#CFCEC6}

.row{display:flex;gap:10px}
.row > *{flex:1}

.list{list-style:none;margin:0;padding:0}
.item{border:1px solid var(--line);border-radius:9px;padding:12px;margin-bottom:10px;background:var(--card)}
.item .name{font-weight:600}
.item .notes{font-size:14px;color:#3a3a34;margin-top:3px;white-space:pre-wrap}
.item .meta{font-size:12px;color:var(--muted);margin-top:6px}

.taglink{display:block;border:1px solid var(--line);border-radius:9px;padding:12px;margin-bottom:10px;
  background:var(--card);text-decoration:none;color:var(--ink)}
.taglink:active{background:var(--accent-weak)}
.taglink .num{font-weight:700}
.taglink .bnum{font-size:22px;font-weight:800;letter-spacing:-0.01em}
.taglink .blabel{font-size:14px;color:var(--muted);margin-left:8px}
a.r-name{color:var(--ink);text-decoration:none}
a.r-name:active{text-decoration:underline}
.taglink .where{font-size:13px;color:var(--muted);margin-top:2px}
.code{font-family:var(--mono);font-size:12px;color:var(--muted)}

.pill{display:inline-block;background:var(--accent-weak);color:var(--accent);font-size:12px;
  font-weight:600;padding:2px 8px;border-radius:99px;font-family:var(--mono)}
.msg{font-size:14px;padding:10px 12px;border-radius:8px;margin-bottom:12px;display:none}
.msg.show{display:block}
.msg.err{background:#FEE2E2;color:var(--bad)} .msg.ok{background:#ECFCCB;color:var(--ok)}
.empty{color:var(--muted);font-size:14px}

footer.made{margin-top:28px;text-align:center;font-size:12px;color:#9A9A90}
a{color:var(--accent)}

/* ── Print This Barnacle ── */
.print-overlay{position:fixed;inset:0;background:#fff;z-index:50;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px}
.print-card{border:1px solid var(--line);border-radius:12px;padding:28px 24px;text-align:center;
  max-width:340px;width:100%;background:#fff}
.print-card .pc-product{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.print-card .pc-name{font-size:34px;font-weight:800;margin:6px 0 4px;letter-spacing:-0.01em}
.print-card .pc-loc{font-size:14px;color:#3a3a34;margin-bottom:16px}
.print-card .pc-qr{margin:0 auto}
.print-card .pc-qr svg{width:60mm;max-width:80vw;height:auto;display:block;margin:0 auto}
.print-card .pc-instr{font-size:12px;color:var(--muted);margin-top:14px}
.print-actions{display:flex;gap:10px;max-width:340px;width:100%}

@media print{
  body.print-mode .wrap{display:none !important}
  body.print-mode .no-print{display:none !important}
  body.print-mode .print-overlay{position:static;display:flex !important}
  body.print-mode .print-card{border:1px solid #000}
}

/* ── Search result (legible hierarchy) ── */
.result{border:1px solid var(--line);border-radius:9px;padding:14px;margin-bottom:10px;background:var(--card)}
.result .r-lead{font-size:12px;color:var(--muted);margin-top:8px}
.result .r-lead:first-child{margin-top:0}
.result .r-item{display:flex;align-items:center;justify-content:space-between;gap:10px}
.result .r-name{font-size:20px;font-weight:700;line-height:1.25;color:var(--ink);flex:1;min-width:0}
.result .r-barnacle{display:inline-block;font-size:22px;font-weight:700;color:var(--accent);text-decoration:none;margin-top:2px}
.result .r-barnacle:active{opacity:.85}
.result .r-loc{font-size:17px;color:#3a3a34;margin-top:2px}

/* ── Items list rows (tap to open detail) ── */
.item-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:9px;padding:13px 14px;margin-bottom:8px;
  background:var(--card);cursor:pointer;font-weight:600;color:var(--ink)}
.item-row:active{background:var(--accent-weak)}

/* ── Item detail view ── */
.detail-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.detail-head .detail-name{flex:1;min-width:0;margin:0}
.detail-name{font-size:22px;font-weight:700;line-height:1.25}
.detail-notes{font-size:15px;color:#3a3a34;margin-top:8px;white-space:pre-wrap}

/* ── Select (used in the Edit screen to move an item) ── */
select{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid #CFCEC6;border-radius:8px;padding:11px 12px;margin-bottom:11px}
select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}

/* ── Item View: current location line ── */
.detail-loc{font-size:13px;color:var(--muted);margin-top:12px}

/* ── Admin details (low-key, collapsed by default) ── */
details.admin{padding:0}
details.admin > summary{cursor:pointer;list-style:none;padding:14px 16px;
  font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
details.admin > summary::-webkit-details-marker{display:none}
details.admin > summary::after{content:"▸";float:right;color:var(--muted);font-weight:400}
details.admin[open] > summary::after{content:"▾"}
.admin-body{padding:0 16px 16px}
.admin-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:13px;padding:8px 0;border-top:1px solid var(--line)}
.admin-key{color:var(--muted);white-space:nowrap}
.admin-val{font-family:var(--mono);font-size:12px;word-break:break-all;text-align:right;color:var(--ink)}
a.admin-val{color:var(--accent)}

/* ── Search clear button ── */
.search-wrap{position:relative;margin-bottom:11px}
.search-wrap input{margin-bottom:0;padding-right:42px}
.search-clear{position:absolute;top:50%;transform:translateY(-50%);right:6px;
  width:32px;height:32px;padding:0;border:none;background:transparent;color:var(--muted);
  font-size:15px;line-height:1;cursor:pointer;display:none;border-radius:50%}
.search-clear.show{display:flex;align-items:center;justify-content:center}
.search-clear:active{background:var(--accent-weak)}

/* ── Mode switch (Find / Manage) ── */
.modebar{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.modebar .mode-label{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
.seg{display:inline-flex;border:1px solid #CFCEC6;border-radius:8px;overflow:hidden}
.seg-btn{width:auto;border:none;border-radius:0;background:#fff;color:var(--ink);
  font-size:14px;font-weight:600;padding:8px 18px;cursor:pointer}
.seg-btn + .seg-btn{border-left:1px solid #CFCEC6}
.seg-btn.active{background:var(--accent);color:#fff}

/* Mode-driven visibility (home page) */
body[data-mode="find"] .manage-only{display:none}
body[data-mode="manage"] .find-only{display:none}

/* ── Status pill (Stored / Out) — items only ── */
.pill-status{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;
  letter-spacing:.02em;vertical-align:middle;white-space:nowrap}
.pill-status.is-stored{background:var(--accent-weak);color:var(--accent)}
.pill-status.is-out{background:#FDECC8;color:#8A5A00}

/* Item rows: name + status + chevron */
.item-row .ir-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Top-left back arrow ── */
header.top{align-items:center}
.backarrow{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;margin:0;
  border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);
  text-decoration:none;font-size:18px;line-height:1;cursor:pointer}
.backarrow:active{background:var(--accent-weak)}

/* ── Button-styled links ── */
.btn{display:block;text-align:center;text-decoration:none;font-weight:600;font-size:15px;
  border-radius:8px;padding:12px 16px;border:1px solid var(--accent);background:var(--accent);color:#fff}
.btn.ghost{background:#fff;color:var(--ink);border-color:#CFCEC6}
.btn:active{opacity:.9}

/* Clickable status pill (search results) */
button.pill-status{width:auto;border:1px solid transparent;cursor:pointer;font-family:inherit}
button.pill-status:active{opacity:.8}

.hint{font-size:12px;color:var(--muted)}

/* Number input (Add Barnacles) */
input[type=number]{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid #CFCEC6;border-radius:8px;padding:11px 12px;margin-bottom:11px}
input[type=number]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}