/* ============================================================================
   ARMINAK CARAVAN — catalogue admin.

   Same palette and typefaces as the site, deliberately: the client moves
   between the two all day and a differently-coloured tool reads as a
   differently-owned tool. It is denser than the site and does not animate —
   this is somewhere to get work done, not somewhere to be impressed.
   ========================================================================= */

/* Tokens live in ../../_ui/tokens.css, loaded before this file. The admin used
   to keep its own :root carrying the SAME palette under different names —
   --accent for --gold, --tile for --tint, --line-soft for --line-s — so the two
   private areas could never be restyled together. The aliases below let the
   hundreds of declarations in this file keep their spelling while there is only
   one set of real values. */
:root {
  --accent:    var(--gold);
  --accent-hi: var(--gold-hi);
  --tile:      var(--tint);
  --bg-elev:   var(--elev);
  --line-soft: var(--line-s);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

h1 { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-display); letter-spacing: var(--tr-h2); }
h2 { margin: 0 0 18px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lang { margin-left: 8px; font: 400 11px/1 var(--mono); letter-spacing: 0.04em; color: var(--accent); text-transform: none; }
.mono { font-family: var(--mono); font-size: var(--fs-micro); }

/* ------------------------------------------------------------------- BAR -- */

/* Ground, blur, hairline and height come from .ac-bar in ../../_ui/tokens.css.
   What stays here is only how this bar lays its own contents out. */
/* The bar reads like the handover's, because it is the same product. It used to
   be three underlined text links pushed to the right-hand edge, which is a
   different piece of furniture from the icon tabs next door and made the two
   private areas feel like two systems. Same lockup, same divider, same tab
   shape, same right-hand cluster. */
.bar__in {
  width: 100%; display: flex; align-items: center;
  gap: clamp(12px, 1.8vw, 22px);
}

.bar__nav {
  display: flex; align-items: center; gap: clamp(6px, 1vw, 12px);
  min-width: 0; flex: 1 1 auto;
}
.bar__t {
  display: flex; align-items: center; gap: 9px;
  margin: 8px 0; padding: 10px 14px;
  border-radius: var(--r-s);
  font: 500 var(--fs-small)/1 var(--ui);
  letter-spacing: 0.01em;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.bar__t svg { flex: none; display: block; color: var(--ink-soft); transition: transform .3s var(--ease), color .25s var(--ease); }
.bar__t:hover { color: var(--ink); background: var(--tint); }
.bar__t:hover svg { transform: scale(1.12); }
.bar__t:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
/* The selected tab is drawn once and the same way on every tab — the ring is
   the state, so a click never leaves a focus ring that looks like selection. */
.bar__t.is-on {
  color: var(--gold-hi); background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.bar__t.is-on svg { color: var(--gold-hi); }

.barlang {
  flex: none; margin-left: auto;
  display: flex; align-items: center; gap: 7px;
  padding: 0 0 0 clamp(10px, 1.6vw, 18px);
  border-left: 1px solid var(--line);
  align-self: stretch;
  font: 400 var(--fs-micro)/1 var(--mono); letter-spacing: 0.1em;
  color: var(--muted);
}
.barlang a { text-decoration: none; color: inherit; padding: 6px 5px; border-radius: var(--r-s); transition: color .2s var(--ease), background-color .2s var(--ease); }
.barlang a:hover { color: var(--ink); background: var(--tint); }
.barlang a.is-on { color: var(--gold-hi); font-weight: 500; }
.barlang a:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.barlang > span[aria-hidden] { opacity: .3; }
.barlang__div { width: 1px; height: 15px; background: var(--line); margin: 0 4px; opacity: 1; }
.bar__out { margin: 0; }

/* Below this the three labels stop fitting beside the lockup and the language
   cluster; the glyphs carry them, and the selected one keeps its name. */
@media (max-width: 720px) {
  .bar__t:not(.is-on) span { display: none; }
  .bar__t:not(.is-on) { gap: 0; padding-left: 11px; padding-right: 11px; }
}

/* ----------------------------------------------------------------- SHELL -- */

.wrap { max-width: 1080px; margin: 0 auto; padding: 34px clamp(18px, 3vw, 34px) 90px; }
.wrap--form { max-width: 880px; }
.crumb { margin: 0 0 18px; font-size: var(--fs-small); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head__act { display: flex; align-items: center; gap: 12px; }
.page-head__act form { margin: 0; }
.sub { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-small); }
.sub .warn { color: var(--accent-hi); }

/* --------------------------------------------------------------- CONTROLS -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 20px;
  border: 1px solid var(--ink); border-radius: var(--radius-s);
  background: none; color: var(--ink);
  font: 500 14px var(--ui); letter-spacing: 0.01em;
  cursor: pointer; text-decoration: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn--go { background: var(--ink); color: var(--bg); }
.btn--go:hover { background: #0F1B2C; }
.btn--ghost { border-color: var(--line); color: var(--ink-soft); }
.btn--ghost:hover { border-color: var(--ink); background: none; color: var(--ink); }
.btn--wide { width: 100%; }
/* Publish is the only control that changes what the public sees, so it is the
   only one that ever gets colour. */
.btn--go.is-due { background: var(--accent); border-color: var(--accent); color: #1B2A41; font-weight: 600; }
.btn--go.is-due:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #FCFAF5; }

.lnk {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 400 14px var(--ui); color: var(--ink-soft);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px;
}
.lnk:hover { color: var(--ink); text-decoration-color: var(--accent); }
.lnk--sm { font-size: var(--fs-micro); }
.lnk--danger { color: var(--danger); }
.lnk--danger:hover { color: var(--danger); text-decoration-color: var(--danger); }
.lnk[disabled] { opacity: .35; cursor: default; }

/* ---------------------------------------------------------------- FLASHES -- */

.flashes { max-width: 1080px; margin: 20px auto -8px; padding: 0 clamp(18px, 3vw, 34px); }
.flash {
  margin: 0 0 10px; padding: 13px 16px;
  border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius-s);
  background: var(--bg-elev); font-size: var(--fs-small);
}
.flash p { margin: 0; }
.flash ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: var(--fs-micro); }
.flash--ok  { border-left-color: var(--accent); }
.flash--err { border-left-color: var(--danger); color: var(--danger); }
.body--gate .flash { margin-bottom: 16px; text-align: left; }

.note { margin: 0 0 22px; padding: 12px 16px; border-radius: var(--radius-s); background: var(--tile); color: var(--ink-soft); font-size: var(--fs-small); }
.note--due { background: rgba(176, 141, 87, 0.15); color: var(--ink); }
.foot-note { margin: 26px 0 0; color: var(--muted); font-size: var(--fs-micro); }
.empty { color: var(--muted); padding: 26px 0; }

/* ------------------------------------------------------------------ ROWS -- */

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 46px 56px 1fr auto;
  align-items: center; gap: 16px;
  padding: 12px 4px; border-bottom: 1px solid var(--line-soft);
}
.row:hover { background: var(--bg-elev); }
.row.is-hidden { opacity: .48; }
.row.is-hidden .row__name { text-decoration: line-through; text-decoration-color: var(--muted); }

.row__ord { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.row__ord form { margin: 0; line-height: 0; }
.ord { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: var(--fs-micro); line-height: 1; padding: 2px 5px; border-radius: var(--r-xs); }
.ord:hover:not([disabled]) { color: var(--ink); background: var(--tile); }
.ord[disabled] { opacity: .2; cursor: default; }
.ord__n { font: 400 11px var(--mono); color: var(--muted); }

.row__thumb { width: 52px; height: 55px; border-radius: var(--r-xs); background: var(--tile); overflow: hidden; display: grid; place-items: center; }
.row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row__thumb img[src$=".svg"] { object-fit: contain; padding: 7px; }
.row__thumb--none { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(27,42,65,.05) 5px 10px); }

.row__main { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.row__name { font-weight: 600; text-decoration: none; font-size: var(--fs-small); }
.row__name:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.row__grade { color: var(--muted); font-size: var(--fs-micro); }
.row__tags { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; margin-top: 3px; }
.tag { font: 400 10.5px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 7px; border-radius: var(--r-xs); background: var(--tile); color: var(--ink-soft); }
.tag--gold { background: rgba(176, 141, 87, 0.18); color: var(--accent-hi); }
.tag--soft { background: none; border: 1px dashed var(--line); color: var(--muted); }

.row__act { display: flex; align-items: center; gap: 14px; }
.row__act form { margin: 0; }

/* ------------------------------------------------------------------ FORM -- */

.card-p { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px clamp(18px, 2.4vw, 28px); margin-bottom: 18px; }
.card-p__note { margin: -8px 0 20px; color: var(--muted); font-size: var(--fs-small); max-width: 62ch; }

.f { display: block; margin-bottom: 18px; }
.f > span { display: block; margin-bottom: 6px; font-size: var(--fs-micro); font-weight: 500; color: var(--ink-soft); }
.f > span b { color: var(--accent-hi); font-weight: 500; }
.f > i { display: block; margin-top: 6px; color: var(--muted); font-size: var(--fs-micro); font-style: normal; max-width: 62ch; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.mt { margin-top: 22px; }
.hint { display: block; margin: 8px 0 0; color: var(--muted); font-size: var(--fs-micro); font-style: normal; max-width: 66ch; }

input[type="text"], input[type="password"], textarea, select {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: #fff; color: var(--ink);
  font: 400 14.5px/1.5 var(--ui);
}
textarea { resize: vertical; min-height: 74px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
input::placeholder, textarea::placeholder { color: #A9B0BC; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 15px center, right 10px center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }

.chk { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: var(--fs-small); color: var(--ink-soft); cursor: pointer; }
.chk input { width: auto; accent-color: var(--ink); }

.rowset { margin-bottom: 4px; }
.rowset__r { display: grid; grid-template-columns: 1fr 1fr 30px; gap: 8px; margin-bottom: 8px; align-items: center; }
.rowset__x { border: 1px solid transparent; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; border-radius: var(--r-xs); height: 30px; }
.rowset__x:hover { color: var(--danger); border-color: var(--line); }
.rowset__add { border: 1px dashed var(--line); background: none; color: var(--ink-soft); border-radius: var(--radius-s); padding: 7px 14px; font: 400 13px var(--ui); cursor: pointer; }
.rowset__add:hover { border-color: var(--accent); color: var(--ink); border-style: solid; }

.form-foot { display: flex; align-items: center; gap: 20px; padding-top: 4px; }
.form-inline .f { max-width: 340px; }

/* ---------------------------------------------------------------- PHOTO -- */

.photo { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.photo__now { width: 140px; height: 147px; border-radius: var(--radius-s); background: var(--tile); overflow: hidden; display: grid; place-items: center; flex: none; }
.photo__now img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo__none { text-align: center; color: var(--muted); font-size: var(--fs-micro); line-height: 1.5; }
.photo__none i { font-style: normal; opacity: .7; }
.photo__act { flex: 1 1 300px; }
.photo__up { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.photo__up input[type="file"] { flex: 1 1 200px; font-size: var(--fs-micro); color: var(--ink-soft); }
.photo__act form + form { margin-top: 12px; }

/* -------------------------------------------------------------- SETTINGS -- */

.baks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.baks li { display: flex; align-items: center; gap: 18px; padding: 10px 2px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-small); }
.baks__n { color: var(--muted); margin-right: auto; font-size: var(--fs-micro); }
.baks form { margin: 0; }

.facts { margin: 0; }
.facts > div { display: flex; gap: 18px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.facts dt { width: 170px; flex: none; color: var(--muted); font-size: var(--fs-small); }
.facts dd { margin: 0; min-width: 0; word-break: break-word; }

/* ------------------------------------------------------------------ GATE -- */

.body--gate { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.gate { width: 100%; max-width: 350px; text-align: center; }
.gate--wide { max-width: 560px; text-align: left; }
.gate__mark { border-radius: 50%; margin-bottom: 20px; }
.gate h1 { font-size: var(--fs-h2); }
.gate__sub { margin: 6px 0 26px; color: var(--muted); font-size: var(--fs-micro); letter-spacing: 0.04em; }
.gate__form { text-align: left; }
.pre { background: var(--tile); padding: 12px 14px; border-radius: var(--radius-s); font: 400 13px var(--mono); overflow-x: auto; }

/* ---------------------------------------------------------------- NARROW -- */

@media (max-width: 720px) {
  .bar { gap: 14px; height: auto; padding: 12px clamp(14px, 4vw, 20px); flex-wrap: wrap; }
  .bar__nav { margin-left: 0; order: 3; flex-basis: 100%; gap: 18px; }
  .bar__out { margin-left: auto; }
  .f2 { grid-template-columns: 1fr; }
  .row { grid-template-columns: 40px 46px 1fr; row-gap: 10px; }
  .row__act { grid-column: 1 / -1; justify-content: flex-end; }
  .rowset__r { grid-template-columns: 1fr 30px; }
  .rowset__r input:first-child { grid-column: 1 / -1; }
}


/* ---- the admin joins the type system --------------------------------------
   Its headings were Manrope while every other surface set display type in
   Cormorant, which is why this area read as a different product rather than as
   the same company's back office. Body, labels and data stay in the UI face. */
.wrap h1, .page-head h1 { font-family: var(--serif); font-weight: 400; letter-spacing: 0.005em; }
.card-p > h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); letter-spacing: 0.005em; }
.gate h1 { font-family: var(--serif); font-weight: 400; }