/* ============================================================================
   [ENGINE] DO NOT REWRITE — read /CLAUDE.md before editing this file
   ----------------------------------------------------------------------------
   Admin panel styling.

   This styles the ADMIN PANEL, not the website. It is the same on every client
   site and is not part of any client's design. The website's styling lives in
   assets/css/site.css.
   ============================================================================ */

/* ==========================================================================
   Kismat Creations admin panel
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The crop and preview modals set display, which would otherwise override the
   browser's [hidden] rule and leave a dark overlay permanently on screen. */
[hidden] { display: none !important; }

:root {
  --ink: #1d1b18;
  --body: #4a453e;
  --soft: #7c756b;
  --gold: #b18f5f;
  --gold-dark: #96784c;
  --bg: #f6f3ee;
  --panel: #ffffff;
  --line: #e6dfd4;
  --line-soft: #f0eae0;
  --ok: #2f6b4f;
  --ok-bg: #edf5f0;
  --err: #a3452f;
  --err-bg: #fbeeea;
  --warn: #8a6420;
  --warn-bg: #fbf3e2;
  --shadow: 0 1px 3px rgba(29,27,24,.05), 0 8px 24px rgba(29,27,24,.05);
  --r: 10px;
  --top: 62px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
h1, h2, h3 { color: var(--ink); margin: 0; }
a { color: var(--gold-dark); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 6px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --------------------------------------------------------------- Topbar */

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--top);
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.topbar-brand {
  display: flex; align-items: center; gap: 11px;
  font-family: 'Playfair Display', serif; font-size: 1.08rem; color: var(--ink);
  text-decoration: none; line-height: 1.15;
}
.topbar-brand small { display: block; font-family: 'Inter', sans-serif; font-size: .7rem; color: var(--soft); font-weight: 400; }
.mark {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 66% 34%, var(--bg) 46%, transparent 47%), var(--gold);
}
.topbar-right { margin-left: auto; display: flex; gap: 8px; }

.btn-mini {
  font-size: .8rem; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); background: var(--panel);
  padding: 7px 14px; border-radius: 999px; transition: all .2s;
}
.btn-mini:hover { border-color: var(--gold); color: var(--gold-dark); }
.btn-mini-quiet { color: var(--soft); }

.topbar-burger {
  display: none; width: 36px; height: 36px; border: 1px solid var(--line);
  background: none; border-radius: 8px; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 4px; padding: 0 8px;
}
.topbar-burger span { display: block; height: 1.5px; background: var(--ink); }

/* -------------------------------------------------------------- Layout */

.shell { display: grid; grid-template-columns: 232px 1fr; padding-top: var(--top); min-height: 100vh; }

.sidebar {
  position: sticky; top: var(--top); align-self: start;
  height: calc(100vh - var(--top));
  background: var(--panel); border-right: 1px solid var(--line);
  padding: 18px 12px; display: flex; flex-direction: column;
  overflow-y: auto;
}
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: 8px; text-decoration: none;
  color: var(--body); font-size: .88rem; transition: background .18s, color .18s;
}
.sidebar nav a:hover { background: var(--bg); color: var(--ink); }
.sidebar nav a.is-on { background: var(--ink); color: #fff; }
.pill {
  margin-left: auto; background: var(--gold); color: #fff;
  font-size: .68rem; font-weight: 600; min-width: 20px; text-align: center;
  padding: 1px 6px; border-radius: 999px;
}
.sidebar nav a.is-on .pill { background: var(--gold); }
.sidebar-foot { margin: auto 0 0; padding: 14px 13px 4px; font-size: .76rem; color: var(--soft); border-top: 1px solid var(--line-soft); }

.content { padding: 26px clamp(18px, 3vw, 40px) 90px; max-width: 1020px; width: 100%; }

.page-head { margin-bottom: 22px; }
.page-head h1 { font-family: 'Playfair Display', serif; font-size: 1.85rem; font-weight: 500; }
.page-head p { margin: 4px 0 0; color: var(--soft); font-size: .9rem; }

/* --------------------------------------------------------------- Cards */

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.card h2 { font-size: 1.02rem; font-weight: 600; margin-bottom: 4px; }
.card h2 + .hint, .card h2 + .seg { margin-top: 10px; }
.sub { font-size: .84rem; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: .06em; margin: 24px 0 10px; }
.hint { font-size: .82rem; color: var(--soft); margin: 0 0 14px; }
.empty { color: var(--soft); font-size: .87rem; font-style: italic; margin: 8px 0; }
.meta { font-size: .76rem; color: var(--soft); margin: 8px 0 0; }

/* -------------------------------------------------------------- Notices */

.notice { border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; font-size: .87rem; border: 1px solid; }
.notice-ok { background: var(--ok-bg); border-color: #cfe3d7; color: var(--ok); }
.notice-err { background: var(--err-bg); border-color: #f0d3ca; color: var(--err); }
.notice-warn { background: var(--warn-bg); border-color: #eddfbf; color: var(--warn); }
.notice-info { background: #f3f0ea; border-color: var(--line); color: var(--body); }
.notice a { color: inherit; }
code { background: #efeae1; padding: 1px 6px; border-radius: 4px; font-size: .86em; }

/* --------------------------------------------------------------- Forms */

.lbl {
  display: block; font-size: .78rem; font-weight: 500; letter-spacing: .03em;
  text-transform: uppercase; color: var(--soft); margin: 16px 0 6px;
}
.card > .lbl:first-of-type { margin-top: 12px; }
.lbl output { float: right; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 600; }

.inp {
  width: 100%; font-family: inherit; font-size: .9rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; transition: border-color .2s, box-shadow .2s;
}
.inp:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(177,143,95,.14); }
textarea.inp { resize: vertical; line-height: 1.65; }
select.inp { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%237c756b' stroke-width='1.4' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.inp-sm { padding: 7px 10px; font-size: .84rem; }
.inp-price { max-width: 110px; }

.range { width: 100%; accent-color: var(--gold); margin: 4px 0 2px; }

.check { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; color: var(--body); margin: 12px 0; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--gold); width: 15px; height: 15px; flex-shrink: 0; }
.check-inline { margin: 0; white-space: nowrap; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--bg); margin-bottom: 18px; }
.seg label { padding: 7px 20px; border-radius: 999px; font-size: .85rem; cursor: pointer; color: var(--soft); transition: all .2s; }
.seg label.is-on { background: var(--ink); color: #fff; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }

/* -------------------------------------------------------------- Buttons */

.btn {
  display: inline-block; font-family: inherit; font-size: .86rem; font-weight: 500;
  padding: 10px 22px; border-radius: 999px; border: 1px solid var(--ink);
  background: var(--ink); color: #fff; cursor: pointer; text-decoration: none;
  transition: all .2s;
}
.btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.btn-primary { background: var(--ink); }
.btn-quiet { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { background: #fff; border-color: var(--gold); color: var(--gold-dark); }
.btn-danger { background: #fff; color: var(--err); border-color: #eccfc7; }
.btn-danger:hover { background: var(--err); border-color: var(--err); color: #fff; }
.btn-sm { padding: 7px 16px; font-size: .8rem; }
.btn-block { width: 100%; margin-top: 18px; }

.tbtn {
  font-family: inherit; font-size: .76rem; padding: 5px 11px; border-radius: 6px;
  border: 1px solid var(--line); background: #fff; color: var(--body); cursor: pointer;
  transition: all .18s; white-space: nowrap;
}
.tbtn:hover { border-color: var(--gold); color: var(--gold-dark); }
.tbtn-danger { color: var(--err); }
.tbtn-danger:hover { background: var(--err); border-color: var(--err); color: #fff; }

.inline { display: inline; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }

.save-bar { display: flex; gap: 10px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.save-bar-sticky {
  position: sticky; bottom: 0; z-index: 20; margin: 20px -24px -22px;
  padding: 14px 24px; background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px); border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r);
}
form > .save-bar-sticky { margin: 0; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); }

/* ------------------------------------------------------------- The hub */

.shell-simple { grid-template-columns: 1fr; }
.content-simple { max-width: 900px; margin: 0 auto; }
.crumb {
  display: inline-block; font-size: .8rem; color: var(--soft);
  text-decoration: none; margin-bottom: 8px;
}
.crumb:hover { color: var(--gold-dark); }
.side-back {
  font-size: .82rem !important; color: var(--soft) !important;
  border-bottom: 1px solid var(--line-soft); border-radius: 0 !important;
  margin-bottom: 6px; padding-bottom: 12px !important;
}
.side-external {
  margin-top: 8px; padding-top: 14px !important;
  border-top: 1px solid var(--line-soft); border-radius: 0 !important;
  color: var(--gold-dark) !important; font-weight: 500;
}
.side-external svg { margin-left: auto; opacity: .7; }
.side-external:hover { background: none !important; color: var(--ink) !important; }

.hub { max-width: 820px; margin: 0 auto; padding: clamp(6px, 3vw, 26px) 0 40px; }
.hub-head { text-align: center; margin-bottom: clamp(24px, 4vw, 38px); }
.hub-mark { display: block; color: var(--gold); margin: 0 auto 14px; width: 40px; }
.hub-head h1 {
  font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 500; margin-bottom: 4px;
}
.hub-head p { margin: 0; color: var(--soft); font-size: .92rem; }

.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 18px); }

.hub-tile {
  position: relative; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 24px 20px; text-align: center; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.hub-tile::after {
  content: ''; position: absolute; inset: 0; border-radius: 16px;
  border: 1px solid transparent; transition: border-color .28s ease;
}
.hub-tile:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 12px 34px rgba(29,27,24,.1);
}
.hub-icon {
  display: grid; place-items: center; width: 74px; height: 74px;
  border-radius: 50%; margin-bottom: 14px;
  background: var(--bg); color: var(--gold);
  transition: background .28s ease, color .28s ease;
}
.hub-tile:hover .hub-icon { background: var(--gold); color: #fff; }
.hub-title {
  font-family: 'Playfair Display', serif; font-size: 1.22rem;
  color: var(--ink); line-height: 1.25;
}
.hub-sub { font-size: .82rem; color: var(--soft); max-width: 24ch; line-height: 1.5; }
.hub-count {
  margin-top: 10px; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold-dark); background: var(--bg);
  padding: 5px 14px; border-radius: 999px;
}
.hub-tile-advanced { background: #fbf9f5; }
.hub-tile-advanced .hub-icon { background: var(--panel); }

.hub-foot {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 28px; font-size: .84rem; color: var(--soft);
}
.hub-foot a { color: var(--soft); text-decoration: none; }
.hub-foot a:hover { color: var(--gold-dark); text-decoration: underline; }

/* ------------------------------------------------- Simple upload screens */

.quick-intro {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 18px; margin: 0 0 16px; font-size: .88rem; color: var(--body);
}
.quick-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.quick-count { margin: 2px 0 0; }
.quick-count strong { color: var(--ink); font-size: 1rem; }
.quick-meter {
  flex: 1; min-width: 140px; max-width: 260px; height: 6px; margin-top: 10px;
  background: var(--line-soft); border-radius: 999px; overflow: hidden;
}
.quick-meter span { display: block; height: 100%; background: var(--gold); border-radius: 999px; }

.ratio-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.ratio-row { display: flex; gap: 8px; align-items: center; }
.ratio-row .inp { flex: 1; }
.rec { font-weight: 400; color: var(--gold-dark); text-transform: none; letter-spacing: 0; }

.file-drop-hero { padding: 34px 20px; margin-top: 18px; }
.drop-big {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 1rem; color: var(--ink);
}
.drop-big svg { color: var(--gold); }
.drop-big small { font-size: .8rem; color: var(--soft); font-weight: 400; }

/* 3 across on a computer, 2 across on a phone */
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.qtile {
  position: relative; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: #fff;
}
.qtile.is-dragging { opacity: .4; }
.qtile.is-over { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(177,143,95,.25); }
.qtile-pos {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; cursor: grab;
  background: rgba(255,255,255,.94); color: var(--ink);
  font-size: .74rem; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.qtile-img { background: var(--bg); }
.qtile-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.qtile-bar {
  display: flex; gap: 5px; padding: 8px; flex-wrap: wrap; justify-content: center;
  border-top: 1px solid var(--line-soft);
}

/* --------------------------------------------------------- Email & SMTP */

.mail-status { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mail-status h2 { margin-bottom: 2px; }
.mail-status .hint { margin: 0; }
.dot-live {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  background: #cfc7ba;
}
.dot-live.is-on { background: var(--gold); box-shadow: 0 0 0 4px rgba(177,143,95,.18); }

.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.card-head .hint { margin-bottom: 0; }

.step-eyebrow {
  display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-dark); margin-bottom: 6px;
}
.card .step-eyebrow + h2 { margin-bottom: 4px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .72rem; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--soft);
}
.chip-ok { border-color: rgba(177,143,95,.4); background: #fdf9f2; color: var(--gold-dark); }
.chip-warn { border-color: #eddfbf; background: var(--warn-bg); color: var(--warn); }
.chip-err { border-color: #f0d3ca; background: var(--err-bg); color: var(--err); }
.log-err { margin-top: 6px; font-size: .78rem; color: var(--err); line-height: 1.5; max-width: 46ch; }
.nowrap { white-space: nowrap; }

.lbl-note { float: right; font-size: .68rem; letter-spacing: .04em; text-transform: none; color: var(--soft); font-weight: 400; }
.lbl-ok { color: var(--ok); }
.lbl-soft { text-transform: none; letter-spacing: 0; color: var(--soft); font-weight: 400; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; letter-spacing: .01em; }

.test-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.test-row .inp { flex: 1; min-width: 220px; }
.test-row .btn:disabled { opacity: .45; cursor: not-allowed; }

.table-wrap { overflow-x: auto; margin-top: 12px; }
.mono-cell { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }

/* Verification gate */
.verify-card { max-width: 520px; margin-inline: auto; }
.verify-head { text-align: center; margin-bottom: 22px; }
.verify-icon { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--bg); color: var(--gold); margin-bottom: 12px; }
.verify-head h2 { font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 500; }
.verify-head .hint { max-width: 40ch; margin-inline: auto; }

.code-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.code-lbl em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--gold-dark); font-size: .78rem; }
.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.6rem; letter-spacing: .5em; text-align: center;
  padding: 14px 12px 14px 22px; margin-bottom: 6px;
}

.verify-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.linkish {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: .84rem; color: var(--gold-dark); text-decoration: underline;
}
.linkish:hover { color: var(--ink); }
.linkish-quiet { color: var(--soft); }
.center { text-align: center; }

/* ------------------------------------------------------- Advanced unlock */

.unlock { max-width: 460px; margin: 0 auto; }
.unlock-card { text-align: center; padding: 32px 28px 26px; }
.unlock-icon {
  display: inline-grid; place-items: center; width: 62px; height: 62px;
  border-radius: 50%; background: var(--bg); color: var(--gold); margin-bottom: 14px;
}
.unlock-card h2 { font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 500; margin-bottom: 8px; }
.unlock-card .hint { max-width: 42ch; margin-inline: auto; }
.unlock-form { margin-top: 20px; text-align: left; }
.unlock-input {
  /* 16px keeps iOS from zooming the page when the field is focused */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px; letter-spacing: .55em; text-align: center;
  padding: 14px 10px 14px 24px;
}
.unlock-note { margin: 18px 0 0; font-size: .84rem; color: var(--soft); }
.unlock-note a { font-weight: 500; }
.unlock-back { display: inline-block; margin-top: 16px; font-size: .82rem; color: var(--soft); text-decoration: none; }
.unlock-back:hover { color: var(--gold-dark); }
.unlock-foot { text-align: center; font-size: .82rem; color: var(--soft); margin-top: 4px; }

.lock-again {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: .8rem; color: var(--soft); text-decoration: underline;
}
.lock-again:hover { color: var(--gold-dark); }

/* ------------------------------------------------------------ Dashboard */

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); }
.stat-num { display: block; font-family: 'Playfair Display', serif; font-size: 1.85rem; color: var(--ink); line-height: 1.1; }
.stat-lbl { font-size: .78rem; color: var(--soft); }

.todo { margin: 10px 0 0; padding-left: 18px; }
.todo li { margin-bottom: 6px; font-size: .88rem; }

.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.quick-grid a {
  display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px;
  text-decoration: none; color: var(--body); transition: all .2s; background: #fff;
}
.quick-grid a:hover { border-color: var(--gold); transform: translateY(-1px); }
.quick-grid strong { display: block; color: var(--ink); font-size: .9rem; font-weight: 600; }
.quick-grid span { font-size: .78rem; color: var(--soft); }

.checklist { list-style: none; margin: 10px 0 0; padding: 0; font-size: .86rem; }
.checklist li { padding-left: 24px; position: relative; margin-bottom: 6px; }
.checklist li::before { position: absolute; left: 0; font-weight: 600; }
.checklist .ok::before { content: '✓'; color: var(--ok); }
.checklist .warn::before { content: '!'; color: var(--warn); }
.checklist .bad::before { content: '✕'; color: var(--err); }

.table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .86rem; }
.table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--soft); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.table td { padding: 10px; border-bottom: 1px solid var(--line-soft); }
.table tr.is-unread td:first-child { font-weight: 600; color: var(--ink); }

/* ---------------------------------------------------------------- Media */

.media-single { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: start; }
.media-thumb { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
.media-thumb img { width: 100%; aspect-ratio: 4/5; object-fit: cover; cursor: zoom-in; }
.thumb-empty { aspect-ratio: 4/5; display: grid; place-items: center; color: var(--soft); font-size: .82rem; }

.file-drop {
  display: block; border: 1.5px dashed var(--line); border-radius: 8px;
  padding: 16px; text-align: center; cursor: pointer; background: var(--bg);
  transition: all .2s; margin-bottom: 10px;
}
.file-drop:hover, .file-drop.is-over { border-color: var(--gold); background: #fdfaf5; }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop span { font-size: .87rem; color: var(--ink); display: block; }
.file-drop small { display: block; font-size: .76rem; color: var(--soft); margin-top: 3px; }
.file-drop-wide { padding: 26px 16px; }

.alt-form { display: flex; gap: 7px; align-items: center; margin-top: 8px; }
.alt-form .inp { flex: 1; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; margin-top: 14px; }
.tile { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.tile.is-dragging { opacity: .4; }
.tile.is-over { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(177,143,95,.25); }
.tile-img { position: relative; }
.tile-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.drag-dot {
  position: absolute; top: 6px; left: 6px; background: rgba(255,255,255,.9);
  border-radius: 5px; padding: 1px 6px; font-size: .8rem; color: var(--body); cursor: grab;
}
.tile-bar { display: flex; gap: 5px; padding: 8px; flex-wrap: wrap; border-top: 1px solid var(--line-soft); }
.tile .alt-form { padding: 0 8px 8px; margin: 0; }
.tile .alt-form .inp { font-size: .78rem; padding: 5px 8px; }

.reorder-form { margin-top: 12px; }
.vid-preview { width: 100%; border-radius: 8px; background: #000; margin-bottom: 10px; }
.logo-preview {
  border: 1px solid var(--line); border-radius: 8px; background: #fffdfa;
  padding: 18px 16px 12px; margin-bottom: 12px; overflow: hidden;
}
.logo-preview-bar {
  display: flex; align-items: center; justify-content: center;
  gap: var(--logo-gap, 13px); min-height: 84px;
}
.logo-preview-bar img { margin-left: var(--logo-x, 0px); transform: translateY(var(--logo-y, 0px)); width: auto; object-fit: contain; flex-shrink: 0; }
.logo-preview-name { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--ink); white-space: nowrap; flex: 0 1 auto; }
.logo-preview-none { font-size: .78rem; color: var(--soft); font-style: italic; }
.logo-preview-tag {
  display: block; text-align: center; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft);
}

.pane[hidden] { display: none; }

/* ----------------------------------------------------------- Hero slides */

.slide-card {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px 18px; margin-top: 14px; background: var(--bg);
}
.slide-card.is-live { border-color: var(--gold); background: #fffdf9; }

.slide-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.slide-num {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line);
  font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--ink);
}
.slide-card.is-live .slide-num { background: var(--gold); border-color: var(--gold); color: #fff; }
.slide-head-main { flex: 1; min-width: 0; }
.slide-head-main h3 { font-size: .96rem; font-weight: 600; }
.slide-head-main p { margin: 0; font-size: .76rem; color: var(--soft); }

.switch { display: flex; align-items: center; gap: 7px; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.switch input { accent-color: var(--gold); width: 16px; height: 16px; }

.seg-sm { margin-bottom: 14px; }
.seg-sm label { padding: 5px 16px; font-size: .8rem; }
.mini-label {
  font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--soft); margin: 0 0 8px;
}
.slide-pane[hidden] { display: none !important; }
.slide-card .media-single { grid-template-columns: 120px 1fr; gap: 14px; }
.slide-card .media-thumb img, .slide-card .thumb-empty { aspect-ratio: 1; }

/* -------------------------------------------------------------- Repeats */

.repeat { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.repeat-row {
  display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: start;
  padding: 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg);
}
.price-row-edit { grid-template-columns: 1.2fr 110px 1.6fr auto; }
.nav-row { grid-template-columns: 1fr 1fr auto auto; align-items: center; }
.repeat-row .tbtn { align-self: center; }

/* ------------------------------------------------------------- Bookings */

.tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.tabs a {
  padding: 7px 18px; border-radius: 999px; text-decoration: none;
  font-size: .85rem; color: var(--body); border: 1px solid var(--line); background: #fff;
}
.tabs a.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.booking-card.is-unread { border-left: 3px solid var(--gold); }
.booking-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 14px; }
.booking-head h2 { font-size: 1.05rem; }
.tag { background: var(--gold); color: #fff; font-size: .66rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: 6px; text-transform: uppercase; letter-spacing: .05em; }
.booking-meta { margin: 2px 0 0; font-size: .8rem; color: var(--soft); }
.booking-tools { display: flex; gap: 6px; flex-wrap: wrap; }

.booking-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 14px; }
.booking-grid dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--soft); }
.booking-grid dd { margin: 2px 0 0; font-size: .88rem; color: var(--ink); word-break: break-word; }
.booking-items {
  border: 1px solid var(--line); border-radius: 8px;
  background: #fdfaf5; padding: 12px 16px; margin-bottom: 14px;
}
.booking-items h3 {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--soft); font-weight: 600; margin-bottom: 8px;
}
.booking-items ul { list-style: none; margin: 0; padding: 0; }
.booking-items li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: .88rem;
}
.booking-items li:last-child { border-bottom: 0; }
.bi-name { color: var(--ink); }
.bi-name b { color: var(--gold-dark); }
.bi-note { color: var(--soft); font-style: italic; font-size: .82rem; }
.bi-price { margin-left: auto; color: var(--gold-dark); white-space: nowrap; font-size: .82rem; }

.booking-msg {
  background: var(--bg); border-left: 2px solid var(--line); border-radius: 0 8px 8px 0;
  padding: 12px 16px; font-size: .89rem; margin-bottom: 14px; white-space: pre-line;
}

/* ------------------------------------------------------------- Swatches */

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
.swatch {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: #fff;
}
.swatch input[type=color] { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 6px; padding: 2px; background: none; cursor: pointer; flex-shrink: 0; }
.swatch strong { display: block; font-size: .85rem; color: var(--ink); font-weight: 500; }
.swatch small { font-size: .75rem; color: var(--soft); }

/* ------------------------------------------------------------ Crop modal */

.crop-modal {
  position: fixed; inset: 0; z-index: 120; background: rgba(24,22,19,.72);
  display: grid; place-items: center; padding: 20px;
  opacity: 0; transition: opacity .2s;
}
.crop-modal.is-open { opacity: 1; }
.crop-panel {
  background: var(--panel); border-radius: 12px; width: min(980px, 100%);
  max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
}
.crop-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.crop-head h2 { font-size: 1rem; }
.crop-x { border: 0; background: none; font-size: 1.7rem; line-height: 1; color: var(--soft); cursor: pointer; }
.crop-body { display: grid; grid-template-columns: 1fr 250px; gap: 18px; padding: 18px 20px 22px; overflow-y: auto; }

.crop-stage {
  position: relative; background: #1d1b18; border-radius: 8px; overflow: hidden;
  display: grid; place-items: center; min-height: 320px; max-height: 62vh;
  user-select: none; touch-action: none;
}
.crop-stage img { max-width: 100%; max-height: 62vh; display: block; pointer-events: none; }
.crop-box {
  position: absolute; border: 1px solid #fff; cursor: move;
  box-shadow: 0 0 0 9999px rgba(20,18,15,.58);
}
.crop-box::before, .crop-box::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.32) 1px, transparent 1px);
  background-size: 33.33% 100%;
}
.crop-box::after { background-image: linear-gradient(to bottom, rgba(255,255,255,.32) 1px, transparent 1px); background-size: 100% 33.33%; }
.ch { position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 2px; z-index: 2; }
.ch.nw { top: -7px; left: -7px; cursor: nwse-resize; }
.ch.ne { top: -7px; right: -7px; cursor: nesw-resize; }
.ch.sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.ch.se { bottom: -7px; right: -7px; cursor: nwse-resize; }

.crop-side { display: flex; flex-direction: column; gap: 10px; }
.crop-hint { font-size: .8rem; color: var(--soft); margin: 0; }
.crop-ratios { display: flex; flex-wrap: wrap; gap: 6px; }
.crop-ratios button {
  font-family: inherit; font-size: .78rem; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--body); cursor: pointer; transition: all .18s;
}
.crop-ratios button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.crop-out { font-size: .78rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.crop-actions { margin-top: auto; }
.crop-actions .btn { width: 100%; }

/* --------------------------------------------------------- Preview modal */

.preview-modal { position: fixed; inset: 0; z-index: 130; background: rgba(20,18,15,.94); display: grid; place-items: center; padding: 50px 24px; }
.preview-modal img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.preview-x { position: absolute; top: 16px; right: 22px; border: 0; background: none; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; }

/* ---------------------------------------------------------------- Login */

.login-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.login-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 38px 34px 30px; width: min(420px, 100%); box-shadow: var(--shadow); text-align: center;
}
.login-mark {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 16px;
  background: radial-gradient(circle at 66% 34%, var(--panel) 46%, transparent 47%), var(--gold);
}
.login-card h1 { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 500; }
.login-sub { margin: 2px 0 22px; color: var(--soft); font-size: .84rem; }
.login-card .lbl { text-align: left; }
.login-card .hint { text-align: left; margin-top: 6px; }
.login-card .notice { text-align: left; }
.login-hint { font-size: .78rem; color: var(--soft); margin: 18px 0 0; line-height: 1.55; }
.login-back { display: inline-block; margin-top: 16px; font-size: .8rem; color: var(--soft); text-decoration: none; }
.login-back:hover { color: var(--gold-dark); }

/* ------------------------------------------------- Recovery keys */

.key-list { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 8px; }
.key-list li {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
}
.key-list li::before {
  content: counter(list-item); counter-increment: none;
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: .7rem;
  display: grid; place-items: center;
}
.key-list { counter-reset: keynum; }
.key-list li { counter-increment: keynum; }
.key-list li::before { content: counter(keynum); }
.key-list code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem; letter-spacing: .09em; color: var(--ink);
  user-select: all; word-break: break-all;
}

.inp-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em; text-transform: uppercase;
}
.inp-key::placeholder { letter-spacing: .08em; text-transform: none; }

.login-forgot { margin: 14px 0 0; text-align: center; }
.login-forgot a { font-size: .82rem; color: var(--gold-dark); text-decoration: none; }
.login-forgot a:hover { text-decoration: underline; }

/* ----------------------------------------------------------- Responsive */

@media (max-width: 900px) {
  /* 16px keeps iOS from zooming the page when a field is focused. */
  .inp, .btn, .tbtn, input, select, textarea, .unlock-input { font-size: 16px; }
  .inp-sm { font-size: 16px; }

  .shell { grid-template-columns: 1fr; }
  .topbar-burger { display: flex; }
  .slide-card .media-single { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: var(--top); left: 0; bottom: 0; width: 240px; z-index: 55;
    transform: translateX(-100%); transition: transform .25s ease;
    /* NOT height:auto. With height:auto the bottom:0 constraint is dropped and
       the panel grows to its content height — 1168px of menu on an 844px
       phone. overflow-y then never engages, so the last few items and the
       "Lock advanced again" footer simply cannot be reached. Pinning the
       height to the viewport is what makes the menu scroll.
       dvh follows the browser chrome as it hides on scroll; vh is the fallback
       for older iOS. */
    height: calc(100vh - var(--top));
    height: calc(100dvh - var(--top));
    overscroll-behavior: contain;   /* scrolling the menu must not scroll the page */
  }
  .sidebar.is-open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.14); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .media-single { grid-template-columns: 1fr; }
  .media-thumb { max-width: 240px; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .crop-body { grid-template-columns: 1fr; }
  .repeat-row, .price-row-edit, .nav-row { grid-template-columns: 1fr; }
  .save-bar-sticky { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 640px) {
  /* Two photos side by side on a phone, exactly as they appear on the site. */
  .quick-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .qtile-bar { padding: 6px; gap: 4px; }
  .qtile-bar .tbtn { padding: 5px 8px; font-size: 13px; }
  .ratio-row { flex-direction: column; align-items: stretch; }
  .quick-bar { flex-direction: column; gap: 8px; }
  .quick-meter { max-width: none; }
}

@media (max-width: 520px) {
  .content { padding: 20px 14px 80px; }
  .card { padding: 18px 16px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .booking-head { flex-direction: column; }

  .hub-grid { gap: 10px; }
  .hub-tile { padding: 16px 12px; border-radius: 13px; }
  .hub-icon { width: 56px; height: 56px; margin-bottom: 10px; }
  .hub-icon svg { width: 26px; height: 26px; }
  .hub-title { font-size: 1rem; }
  .hub-sub { font-size: .74rem; }
  .hub-count { font-size: .64rem; padding: 4px 10px; margin-top: 7px; }
}

/* --------------------------------------------------- No zoom on tapping in
   iOS zooms the whole page whenever a field is smaller than 16px, whatever
   the screen size. Every touch device gets 16px so that never happens, on the
   login and recovery screens as much as anywhere else. */

@media (pointer: coarse) {
  .inp, .inp-sm, .inp-key, .inp-price, .btn, .tbtn,
  input, select, textarea, .unlock-input { font-size: 16px; }
}

/* ==========================================================================
   UNIVERSAL TEMPLATE MODULES
   --------------------------------------------------------------------------
   Styles for the schema driven screens: content blocks, pages manager,
   business info and integrations. Everything here reuses the variables and
   spacing already set above so the new screens look native.
   ========================================================================== */

/* --- generated fields (mw_field_input) --- */
.fld { margin: 0 0 1.15rem; }
.fld .lbl { display: block; }
.fld .req { color: #b4483c; }
.fld-suffix { margin-left: .45rem; font-size: .85rem; opacity: .7; }

.switch { display: flex; align-items: center; gap: .6rem; cursor: pointer; margin: 0 0 .4rem; }
.switch input { width: 1.05rem; height: 1.05rem; }
.switch-text { font-size: .95rem; }

.colour-row { display: flex; align-items: center; gap: .6rem; }
.colour-row input[type=color] { width: 3rem; height: 2.2rem; padding: 2px; cursor: pointer; }
.colour-hex { width: 7rem; }

.img-field { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.img-field-preview { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line, #e3e3e3); }
.img-field-empty {
  width: 84px; height: 84px; display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--line, #d5d5d5); border-radius: 6px;
  font-size: .7rem; line-height: 1.3; opacity: .6; padding: .3rem;
}
.img-field-clear { display: flex; align-items: center; gap: .4rem; font-size: .85rem; width: 100%; }

/* --- sortable rows --- */
.sortlist { list-style: none; margin: .5rem 0 0; padding: 0; }
.sortlist-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem; margin-bottom: .4rem; cursor: grab;
  border: 1px solid var(--line, #e3e3e3); border-radius: 7px; background: #fff;
}
.sortlist-row.is-dragging { opacity: .45; }
.sortlist-title { flex: 1; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .95rem; }
.sortlist-title code { font-size: .78rem; opacity: .6; }
.sortlist-actions { display: flex; gap: .4rem; }

/* --- danger drawer --- */
.danger-drawer { margin-top: 1.2rem; border-top: 1px solid var(--line, #eee); padding-top: .9rem; }
.danger-drawer > summary { cursor: pointer; font-size: .88rem; opacity: .72; }
.danger-drawer[open] > summary { margin-bottom: .7rem; }
.inline-delete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; border-bottom: 1px dashed var(--line, #eee); font-size: .9rem;
}

/* --- opening hours table --- */
.hours-table { width: 100%; border-collapse: collapse; margin: .9rem 0; font-size: .92rem; }
.hours-table th, .hours-table td { padding: .4rem .45rem; text-align: left; vertical-align: middle; }
.hours-table thead th { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; }
.hours-table tbody th { font-weight: 500; white-space: nowrap; }
.hours-table input[type=time] { width: 7.5rem; }
.check-tight { margin: 0; }

/* --- misc --- */
.check-inline { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .8rem 0; }
.check-stack { display: grid; gap: .55rem; margin-top: .6rem; }
.check-stack .check small { display: block; opacity: .6; font-size: .8rem; }
.crumb-row { margin: 0 0 1rem; }
.code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  .hours-table thead { display: none; }
  .hours-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: .6rem 0; border-bottom: 1px solid var(--line, #eee); }
  .hours-table tbody th { grid-column: 1 / -1; }
  .hours-table td:last-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   NUDGES, SAVED VERSIONS AND LIGHT BRANDING
   --------------------------------------------------------------------------
   --admin-accent is set inline by admin/index.php from the client's brand
   colour, AFTER a contrast check. See includes/admin-brand.php for why the
   panel takes only the accent and the logo, and never the client's full theme.
   ========================================================================== */

.topbar-logo { height: 26px; width: auto; display: block; border-radius: 3px; }

.btn-primary { background: var(--admin-accent, #3d5a80); border-color: var(--admin-accent, #3d5a80); }
.sidebar nav a.is-on { box-shadow: inset 2px 0 0 var(--admin-accent, #3d5a80); }

.nudge-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.nudge {
  display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
  padding: .85rem 1rem; border: 1px solid var(--line, #e3e3e3);
  border-left: 3px solid var(--line, #e3e3e3); border-radius: 7px; background: #fff;
}
.nudge-warn { border-left-color: #d8a13a; }
.nudge-info { border-left-color: #9aa7b4; }
.nudge-body { flex: 1; min-width: 0; }
.nudge-body strong { display: block; font-size: .95rem; margin-bottom: .25rem; }
.nudge-body p { margin: 0 0 .2rem; font-size: .86rem; line-height: 1.5; opacity: .78; }
.nudge-fix { font-style: italic; opacity: .62 !important; }
.nudge .btn { flex: 0 0 auto; white-space: nowrap; }

.pill-quiet { background: #e9edf1; color: #4a5560; }

@media (max-width: 600px) {
  .nudge { flex-direction: column; align-items: stretch; }
  .nudge .btn { align-self: flex-start; }
}

/* ==========================================================================
   MOBILE REFINEMENT  —  keep this block LAST in the file
   --------------------------------------------------------------------------
   Everything below is deliberately at the end of the stylesheet. The rules in
   here are functional guarantees rather than decoration: field zoom, tap
   target size, and reachable controls. Anything appended after this block can
   silently defeat them, which is exactly what happened once already — a
   .code-input rule added later set a textarea to 13.4px and reintroduced the
   iOS zoom this file had already solved.

   If you add styles to this panel, add them ABOVE this comment.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NO ZOOM WHEN A FIELD IS TAPPED
   --------------------------------------------------------------------------
   iOS Safari zooms the whole page whenever a focused text field renders below
   16px, then leaves the viewport scaled and the layout shifted. The only
   reliable cure is 16px on every focusable field.

   Note what is deliberately NOT done here: the viewport meta tag keeps
   user-scalable enabled. Adding maximum-scale=1 or user-scalable=no would also
   stop the zoom, and would stop a person with low vision pinching to read
   anything at all. Preventing an unwanted automatic zoom is worth doing;
   removing someone's ability to zoom on purpose is not.

   !important is justified here because this is an accessibility guarantee, not
   a style preference. A later rule with higher specificity must not be able to
   quietly break it. checkbox / radio / range / color are excluded — they carry
   no text and never trigger the zoom.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='file']),
  select,
  textarea {
    font-size: 16px !important;
    line-height: 1.45;
  }
}

/* --------------------------------------------------------------------------
   2. TAP TARGETS
   --------------------------------------------------------------------------
   A finger pad is around 9mm. Anything much under 44px gets mis-tapped, and
   mis-tapping in an admin panel means deleting the wrong row. These sizes only
   apply to touch devices, so the desktop panel stays as dense as it is.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn, .btn-sm, .tbtn {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding-inline: 18px;
  }
  .tbtn { padding-inline: 14px; }
  /* .btn-mini is deliberately NOT given extra padding here. It lives in the
     fixed-width topbar, and widening it is what pushed "View site" and
     "Log out" onto second lines. It gets its height from section 11 instead. */
  .btn-mini { min-height: 40px; }

  /* Checkboxes ship at 15px. Enlarge the control and give the whole label a
     comfortable row height, so the text is tappable too rather than just the
     box itself. */
  input[type='checkbox'], input[type='radio'] {
    width: 22px; height: 22px; flex: 0 0 auto;
    accent-color: var(--admin-accent, var(--gold));
  }
  .check, .switch, .img-field-clear, .check-tight {
    min-height: 44px; align-items: center; gap: 12px;
  }
  .check-stack .check { min-height: 52px; }

  /* Disclosure rows and quiet text buttons are easy to miss entirely. */
  .danger-drawer > summary,
  .lock-again,
  .crumb { min-height: 44px; display: flex; align-items: center; }

  .sidebar nav a { min-height: 46px; display: flex; align-items: center; }
}

/* --------------------------------------------------------------------------
   3. DENSITY
   --------------------------------------------------------------------------
   Settings screens ran to 4,000px on a 844px phone — five full swipes to reach
   a save button. The fix is tightening the rhythm between blocks rather than
   shrinking type, which would undo section 1.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .content { padding: 16px 14px 96px; }
  .card { padding: 16px 15px; margin-bottom: 14px; border-radius: 12px; }
  .card h2 { font-size: 1.02rem; margin-bottom: 4px; }
  .page-head { margin-bottom: 14px; }
  .page-head h1 { font-size: 1.5rem; }
  .hint { margin-bottom: 10px; line-height: 1.5; }
  .fld { margin-bottom: .85rem; }
  .lbl { margin-bottom: 4px; }
  .sub { margin: 18px 0 8px; }

  /* Long explanatory paragraphs are the main source of the scroll. Keep them
     readable but stop them dominating the screen. */
  .card > .hint { font-size: .8rem; }
}

/* --------------------------------------------------------------------------
   4. OPENING HOURS ON A PHONE
   --------------------------------------------------------------------------
   A seven-row, five-column table cannot be squeezed into 390px. Each day
   becomes a small card instead: name and closed toggle on one line, the two
   times side by side under it, note last.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hours-table, .hours-table tbody, .hours-table tr, .hours-table th, .hours-table td {
    display: block; width: 100%;
  }
  .hours-table thead { display: none; }
  .hours-table tr {
    position: relative;
    padding: 12px 12px 10px; margin-bottom: 10px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px;
    align-items: center;
  }
  .hours-table tbody th {
    grid-column: 1 / -1; font-size: .95rem; font-weight: 600;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0 2px;
  }
  /* The closed checkbox rides up beside the day name. */
  .hours-table td:nth-of-type(1) {
    position: absolute; top: 10px; right: 12px; width: auto; padding: 0;
  }
  .hours-table td:nth-of-type(1)::after {
    content: 'Closed'; margin-left: 8px; font-size: .82rem; color: var(--soft);
  }
  .hours-table td:nth-of-type(1) .check { min-height: 0; }
  .hours-table td:nth-of-type(2),
  .hours-table td:nth-of-type(3) { padding: 0; }
  .hours-table td:nth-of-type(4) { grid-column: 1 / -1; padding: 0; }
  .hours-table input[type='time'] { width: 100%; }
  .hours-table td:nth-of-type(2)::before { content: 'Opens'; }
  .hours-table td:nth-of-type(3)::before { content: 'Closes'; }
  .hours-table td:nth-of-type(2)::before,
  .hours-table td:nth-of-type(3)::before {
    display: block; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--soft); margin-bottom: 3px;
  }
}

/* --------------------------------------------------------------------------
   5. TOPBAR
   --------------------------------------------------------------------------
   Brand, three buttons and a burger do not fit across 390px. The labels drop
   to icons, and the brand line truncates instead of wrapping the bar to two
   rows and pushing the page down.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .topbar { padding: 0 12px; gap: 10px; }
  .topbar-brand { min-width: 0; font-size: .98rem; }
  .topbar-brand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-brand small { display: none; }
  .topbar-right { gap: 6px; }
  .btn-mini { padding: 0 12px; font-size: .78rem; }
}

/* --------------------------------------------------------------------------
   6. SIDEBAR AS A SHEET
   --------------------------------------------------------------------------
   The off-canvas menu had no backdrop, so tapping beside it did nothing and
   the page behind stayed scrollable underneath. Both read as broken.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .sidebar { width: min(280px, 82vw); overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* The dim behind the open menu is a spread box-shadow, NOT a child element.
     A ::before backdrop was tried first and was wrong twice over:

       1. A negative z-index child paints on top of its parent's BACKGROUND
          (only behind its content), so the overlay greyed out the white menu
          panel itself — the menu looked washed out instead of the page behind
          it looking dimmed.
       2. Being a child, it was inside sidebar.contains(event.target), so the
          existing tap-outside-to-close handler in admin.js treated a tap on
          the backdrop as a tap on the menu and refused to close it.

     A box-shadow paints outside the border box and cannot be hit-tested, so
     the panel stays crisp and taps fall through to the document handler. */
  .sidebar.is-open {
    box-shadow: 0 0 40px rgba(0, 0, 0, .16),
                0 0 0 100vmax rgba(29, 27, 24, .42);
    clip-path: inset(0 -100vmax 0 0);   /* let the shadow escape to the right */
  }
}

/* --------------------------------------------------------------------------
   7. ALIGNMENT DETAILS
   -------------------------------------------------------------------------- */
/* Hub tiles sat on a flex centre, so a title that wrapped to two lines pushed
   its icon and count out of line with the tile beside it. A fixed row track
   keeps every tile's parts on the same baseline. */
.hub-tile {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  justify-items: center; align-content: start;
}
.hub-sub { display: flex; align-items: center; }

@media (max-width: 520px) {
  .hub-tile { padding: 18px 12px; gap: 2px; }
  .hub-sub { font-size: .76rem; line-height: 1.4; }
}

/* Buttons in a row wrap rather than overflowing a narrow screen. */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 520px) {
  .btn-row .btn, .save-bar .btn { flex: 1 1 100%; }
  .inline-delete { flex-wrap: wrap; gap: .5rem; }
}

/* --------------------------------------------------------------------------
   8. REPEATING ROWS  (menu links, price lines, extra contacts)
   --------------------------------------------------------------------------
   Stacking every field one per line turned a six-item menu into 1,795px of
   scrolling, and gave a full-width, red, destructive Remove button equal
   billing with the content it deletes. Pairing the toggle and the remove
   control on one line halves the height and puts Remove back where it belongs:
   small, secondary, and to the side.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .repeat-row, .nav-row, .price-row-edit {
    grid-template-columns: 1fr auto;
    gap: 8px 10px;
    padding: 12px; margin-bottom: 10px;
    border: 1px solid var(--line-soft); border-radius: 10px;
    align-items: center;
  }
  /* Text fields take the full width; the last two controls share a line. */
  .repeat-row > .inp { grid-column: 1 / -1; }
  .repeat-row > .check { grid-column: 1; margin: 0; }
  .repeat-row > .tbtn { grid-column: 2; justify-self: end; }
}

/* --------------------------------------------------------------------------
   9. SMALL ALIGNMENT FIXES FOUND BY MEASURING
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  /* Was 39px wide because horizontal padding fought the declared width. */
  .topbar-brand { min-height: 44px; }
  /* 52px was more generous than the 44px guideline and, over eleven rows of
     nudge toggles, added most of a screen of scrolling for no benefit. */
  .check-stack .check { min-height: 44px; }
}

/* In the compact hours card the closed toggle sits in the corner, so its label
   has to stay on the same line as the box rather than wrapping beneath it. */
@media (max-width: 640px) {
  .hours-table td:nth-of-type(1) {
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
  }
  .hours-table td:nth-of-type(1)::after { margin-left: 0; }
  .hours-table td:nth-of-type(1) .check,
  .hours-table td:nth-of-type(1) .check-tight {
    margin: 0; padding: 6px; min-height: 0;   /* padding gives the hit area */
  }
  .hours-table tbody th { padding-right: 92px; }
}

/* --------------------------------------------------------------------------
   10. VERY NARROW SCREENS (320px — an iPhone SE, still in use)
   --------------------------------------------------------------------------
   The topbar is position:fixed, and a fixed element that overflows still
   widens the document. So a header that did not quite fit was making every
   page on the panel scroll sideways — the symptom appeared on the content,
   the cause was the header.

   Below 400px the brand wordmark gives up its space and the logo alone links
   home. Losing the business name on a 320px screen is a smaller loss than
   every page drifting horizontally.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   11. THE TOPBAR  —  rebuilt after it wrapped to three lines on a real phone
   --------------------------------------------------------------------------
   What went wrong: a burger, a brand, and three text buttons cannot share
   430px. Each button was also given generous tap padding, which pushed
   "View site" and "Log out" onto second lines and left the bar looking broken.

   The fix is not smaller text — that would bring back the zoom problem. It is
   fewer words. Each action now carries an icon and a label; below 560px the
   labels drop away and the icons stand alone, which is what every mobile app
   does with a crowded header. Meaning is preserved through aria-label/title.
   -------------------------------------------------------------------------- */

.topbar-burger span { width: 18px; }        /* spans have no intrinsic width */

.btn-mini {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  white-space: nowrap;                       /* never wrap a label mid-button */
  line-height: 1;
}
.btn-mini svg {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (min-width: 561px) {
  .btn-mini svg { display: none; }           /* desktop keeps words, not icons */
}

@media (max-width: 560px) {
  .topbar { gap: 8px; padding: 0 10px; }
  .topbar-brand { flex: 1 1 auto; min-width: 0; }
  .topbar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { flex: 0 0 auto; gap: 6px; }

  /* Icon-only, square, unmistakably tappable. */
  .btn-mini { width: 40px; height: 40px; padding: 0; gap: 0; }
  .btn-mini-label { display: none; }
  .btn-mini svg { width: 18px; height: 18px; }

  /* The burger already opens the menu, so a second "Menu" button beside it is
     clutter. It stays on the simple screens, which have no burger. */
  .shell:not(.shell-simple) ~ * .btn-mini-menu,
  body:not(.is-simple) .btn-mini-menu { display: none; }
}

@media (max-width: 360px) {
  .topbar-brand .topbar-name { display: none; }   /* logo alone links home */
}

/* A four-column table cannot fit 320px and should not try. Let the table
   itself scroll rather than dragging the whole page sideways with it — the
   scroll stays where the person expects it, on the thing that is too wide. */
@media (max-width: 560px) {
  .table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap; width: 100%;
  }
  .table th, .table td { padding-inline: 10px; }
}

@media (max-width: 340px) {
  .topbar { gap: 4px; padding: 0 6px; }
  .btn-mini { padding: 0 8px; font-size: .72rem; }
}

/* Nothing in the panel may force sideways scrolling. Long unbroken strings —
   a pasted URL, an API key, a file path in the environment list — are the
   usual cause. */
.content, .card, .notice { min-width: 0; }
.card code, .checklist code, .hint code { overflow-wrap: anywhere; }
.inp, .code-input { max-width: 100%; }

/* The sticky save bar must clear the iOS home indicator, or the last few
   pixels of the button sit under it and cannot be pressed. */
@supports (padding: max(0px)) {
  .save-bar-sticky { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}