/* Raqim identity — the dashboard is a Raqim product wrapped around the
   client's own page, so it wears Raqim's colours, not the client's.

   Bronze fails AA against Ink at body sizes, so it is used for structure,
   headings and marks only. Body copy is Parchment or a Parchment tint. */

:root {
  --ink:        #0F0F1A;
  --ink-2:      #16161F;
  --ink-3:      #1E1E2A;
  --bronze:     #8A6940;
  --bronze-hi:  #C79A5E;
  --parchment:  #F0EDE6;
  --ash:        #C4C0BA;

  --text-2: rgba(240, 237, 230, .70);
  --text-3: rgba(240, 237, 230, .44);
  --hairline: rgba(240, 237, 230, .11);
  --bronze-line: rgba(138, 105, 64, .45);

  --good: #4E8C6A;
  --bad:  #B4544A;

  --radius: 12px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ink);
  color: var(--parchment);
  font-family: "Readex Pro", system-ui, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bronze-hi); }

.vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- the Kufic-ish mark ---------- */

.mark {
  width: 22px; height: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  flex: 0 0 auto;
}
.mark i { background: var(--bronze-line); border-radius: 1px; }
.mark i.on { background: var(--bronze-hi); }

/* ---------- shell ---------- */

.top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
  background: var(--ink-2);
  position: sticky;
  top: 0;
  z-index: 5;
  flex-wrap: wrap;
}

.top__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--parchment);
}
.top__brand small {
  color: var(--text-3);
  font-weight: 400;
  font-size: .8rem;
}

.top__spacer { flex: 1 1 auto; }

.top nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.wrap { max-width: 64rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

h1 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
h2 { margin: 0 0 .3rem; font-size: 1rem; font-weight: 600; }

.lede { margin: .1rem 0 0; color: var(--text-2); font-size: .85rem; }

/* ---------- controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border: 1px solid var(--bronze-line);
  border-radius: 999px;
  background: transparent;
  color: var(--parchment);
  font: inherit;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { border-color: var(--bronze-hi); background: rgba(138, 105, 64, .14); }
.btn:focus-visible { outline: 3px solid var(--bronze-hi); outline-offset: 2px; }

.btn--solid {
  background: var(--bronze);
  border-color: var(--bronze);
  color: #FFF6E9;
  font-weight: 600;
}
.btn--solid:hover { background: var(--bronze-hi); border-color: var(--bronze-hi); color: var(--ink); }

.btn--quiet { border-color: transparent; color: var(--text-2); padding-inline: .55rem; }
.btn--quiet:hover { color: var(--parchment); background: rgba(240, 237, 230, .07); }

.btn--danger:hover { border-color: var(--bad); color: #FFD9D5; background: rgba(180, 84, 74, .16); }

.btn.is-on { background: var(--bronze); border-color: var(--bronze); color: #FFF6E9; }

.btn--tiny { font-size: .74rem; padding: .2rem .55rem; }

label { display: block; font-size: .78rem; color: var(--text-2); margin-bottom: .25rem; }

input[type=text], input[type=password], input[type=url], select {
  width: 100%;
  padding: .5rem .7rem;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: var(--ink);
  color: var(--parchment);
  font: inherit;
  font-size: .9rem;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--bronze-hi);
  box-shadow: 0 0 0 3px rgba(199, 154, 94, .18);
}
input::placeholder { color: var(--text-3); }

.hint { margin: .2rem 0 0; font-size: .72rem; color: var(--text-3); }

/* ---------- panels ---------- */

.panel {
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem 1.25rem;
  margin-bottom: 1rem;
}

.panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
  flex-wrap: wrap;
}
.panel__help { margin: 0; color: var(--text-2); font-size: .82rem; max-width: 46ch; }

/* ---------- stat tiles ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.tile {
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: .9rem 1rem;
}
.tile--key { border-color: var(--bronze-line); }
.tile__n {
  display: block;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.tile--key .tile__n { color: var(--bronze-hi); }
.tile__l { color: var(--text-2); font-size: .8rem; }

/* ---------- tables ---------- */

.scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: .86rem; }

thead th {
  text-align: start;
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
tbody th { text-align: start; font-weight: 500; }
tbody th, tbody td { padding: .5rem .6rem .5rem 0; vertical-align: middle; }
tbody tr + tr th, tbody tr + tr td { border-top: 1px solid rgba(240, 237, 230, .06); }

.num { text-align: end; font-variant-numeric: tabular-nums; width: 4.5rem; }
.viz { width: 45%; padding-inline-start: .75rem; }

/* one measure, so one hue; every row is labelled and shows its number */
.bar {
  display: block;
  height: 10px;
  min-width: 2px;
  background: var(--bronze);
  border-radius: 0 4px 4px 0;
}
[dir="rtl"] .bar { border-radius: 4px 0 0 4px; }

.days { display: flex; align-items: flex-end; gap: 2px; height: 5rem; }
.day { flex: 1 1 0; min-width: 3px; max-width: 1.75rem; height: 100%;
       display: flex; align-items: flex-end; }
.day__bar { width: 100%; min-height: 2px; background: var(--bronze);
            border-radius: 4px 4px 0 0; }
.day:hover .day__bar { background: var(--bronze-hi); }
.axis { display: flex; justify-content: space-between; margin: .45rem 0 0;
        color: var(--text-3); font-size: .72rem; font-variant-numeric: tabular-nums; }

.mono { font-family: var(--mono); font-size: .78rem; color: var(--text-2); white-space: nowrap; }
.is-bot { opacity: .45; }
.tag { display: inline-block; padding: 0 .35rem; border: 1px solid var(--hairline);
       border-radius: 4px; font-size: .68rem; color: var(--text-3); }

/* ---------- page head + tabs ---------- */

.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.tabs {
  display: flex;
  gap: .25rem;
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .2rem;
}
.tab {
  padding: .3rem 1rem;
  border-radius: 999px;
  color: var(--text-2);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
}
.tab:hover { color: var(--parchment); }
.tab.is-on { background: var(--bronze); color: #FFF6E9; font-weight: 600; }

.ranges { display: flex; gap: .4rem; margin-bottom: 1.1rem; }

/* ---------- link rows ---------- */

.items { list-style: none; margin: 0; padding: 0; }

.item {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .8rem 0;
  flex-wrap: wrap;
}
.item + .item { border-top: 1px solid rgba(240, 237, 230, .07); }

.item--empty { color: var(--text-3); font-size: .875rem; padding: .5rem 0; }

.item--editing {
  display: block;
  background: var(--ink-3);
  border: 1px solid var(--bronze-line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.1rem;
  margin: .5rem 0;
}
.item--editing + .item { border-top: none; }

.item__main { flex: 1 1 18rem; min-width: 0; display: grid; gap: .2rem; }

/* These hold whatever the client typed -- Arabic, Latin, a phone number, an
   @handle. plaintext makes each string follow its own first strong character,
   so "@badenjki.home" stops rendering as "badenjki.home@" and a phone number
   keeps its digit groups in order inside an RTL page. */
.item__name,
.item__sub {
  unicode-bidi: plaintext;
  text-align: start;
}
.item__name { font-weight: 600; font-size: .95rem; }
.item__sub { font-size: .82rem; color: var(--text-2); }
.item__dest {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: start;
}
.item__slug {
  margin: 0 0 .1rem;
  font-family: var(--mono);
  font-size: .9rem;
  font-weight: 600;
  color: var(--bronze-hi);
}

.rowactions {
  display: flex;
  gap: .3rem;
  align-items: center;
  flex: 0 0 auto;
  margin-inline-start: auto;
}
.rowactions form { display: inline; }

.addrow { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--hairline); }

.spacer { flex: 1 1 auto; }

.url {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  max-width: 30rem;
  background: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: .25rem .25rem .25rem .55rem;
  margin-top: .15rem;
}
.url code {
  flex: 1 1 auto;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--bronze-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: start;
}

.pill {
  display: inline-block;
  padding: .05rem .5rem;
  border: 1px solid var(--bronze-line);
  border-radius: 999px;
  font-size: .68rem;
  color: var(--bronze-hi);
}

/* ---------- add form ---------- */

.form {
  border-top: 1px solid var(--hairline);
  margin-top: 1rem;
  padding-top: 1rem;
}

/* Fields align to the TOP, not the bottom. Only some of them carry a hint, and
   bottom-alignment made those columns shove their neighbours out of line. */
/* auto-FILL, not auto-fit: auto-fit collapses the empty tracks, so a form with
   one field stretched a short slug input across the whole panel. */
.form__fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: .85rem 1rem;
  align-items: start;
}

.field { min-width: 0; }
.field > label { min-height: 1.15em; }

/* The submit button gets its own row. Inside the grid it became just another
   column, stretching to a field's width and wrapping onto a half-empty line. */
.form__actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-top: .95rem;
  flex-wrap: wrap;
}

.check { display: flex; align-items: center; gap: .45rem; }
.check input { width: auto; }
.check label { margin: 0; }

/* ---------- flashes ---------- */

.flash {
  padding: .6rem .9rem;
  border-radius: 9px;
  margin-bottom: .75rem;
  font-size: .85rem;
  border: 1px solid;
}
.flash--ok    { border-color: rgba(78, 140, 106, .5); background: rgba(78, 140, 106, .13); }
.flash--error { border-color: rgba(180, 84, 74, .55); background: rgba(180, 84, 74, .14); }

/* ---------- login ---------- */

.login {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}
.login__card {
  width: 100%;
  max-width: 22rem;
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 1.75rem 1.5rem 1.5rem;
}
.login__brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.4rem;
}
.login__brand b { font-weight: 600; font-size: 1.05rem; }
.login__brand span { color: var(--text-3); font-size: .82rem; }
.login .field + .field { margin-top: .85rem; }
.login .btn { width: 100%; justify-content: center; margin-top: 1.15rem; }
.login__lang { text-align: center; margin-top: 1.1rem; }
.login__lang a { color: var(--text-3); font-size: .78rem; text-decoration: none; }
.login__lang a:hover { color: var(--bronze-hi); }

/* ---------- cards ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .85rem; }
.card {
  display: block;
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
}
.card:hover { border-color: var(--bronze-hi); }
.card b { display: block; font-weight: 600; margin-bottom: .35rem; }
.card span { color: var(--text-2); font-size: .8rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}