/* ═══════════════════════════════════════════════════════════════════════════
   Rava panel — theme layer over Pico CSS v2.1.1
   ───────────────────────────────────────────────────────────────────────────
   Kian, 2026-09-05: "a soft human well designed default design system that
   uses a bit of Rava's colors and does the rest."

   So this file is deliberately SMALL. Pico supplies the judgement — rhythm,
   type scale, form behaviour, focus rings, dark mode. We supply three things:
     1. one accent colour (ajori) instead of Pico's blue
     2. the Farsi typeface, self-hosted
     3. the RTL corrections Pico does not ship

   Rava's own design system is still under construction, so nothing here tries
   to BE it. When it lands, this file is the single place to reconcile.

   ⚠ Load order matters: pico.min.css first, this second.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. type ─────────────────────────────────────────────────────────────────
   Self-hosted, never a CDN — a webfont from a foreign host is the one thing
   that turns a working internal tool into an unstyled page during an outage.
   Two optical sizes doing different jobs: Low reads quietly at paragraph size,
   Mid carries headings and anything that must feel deliberate. */
@font-face{font-family:"Abar Low";src:url("/fonts/AbarLowFaNum-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Abar Low";src:url("/fonts/AbarLowFaNum-SemiBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Abar Mid";src:url("/fonts/AbarMidFaNum-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Abar Mid";src:url("/fonts/AbarMidFaNum-SemiBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Abar Mid";src:url("/fonts/AbarMidFaNum-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

/* ── 2. the accent, and a warmed neutral ─────────────────────────────────────
   ajori #A54324 — canonical since 2026-09-04, when the Sep 4 logo export was
   ruled canonical (Colour Palette v7.1). The previous panel CSS still carried
   the retired #9D412F.
   Everything else is Pico's own neutral, nudged a few degrees warm. Warmth is
   what makes an admin tool feel human rather than clinical; saturation is what
   would make it shout, so there is none beyond the accent. */
:root{
  --rava-ajori:#A54324;
  --rava-ajori-deep:#83341B;
  --rava-ajori-tint:#FBEFE9;

  --pico-font-family:"Abar Low","Abar Mid",system-ui,sans-serif;
  --pico-font-family-sans-serif:"Abar Low","Abar Mid",system-ui,sans-serif;
  --pico-line-height:1.75;
  --pico-border-radius:.6rem;      /* softer than Pico's default corner */
  --pico-spacing:1.15rem;
  --pico-typography-spacing-vertical:1.25rem;
}

/* light — a warm off-white ground, cards a shade lighter so they lift */
[data-theme=light],
:root:not([data-theme=dark]){
  --pico-background-color:#FCFAF7;
  --pico-color:#2E2724;
  /* ⚠ Heading colours are deliberately NOT set here. An earlier pass pinned
     them to near-black in this light block only; because the dark block did not
     reset them, every heading in dark mode rendered near-black on charcoal and
     effectively vanished. Caught by looking at the page in dark mode, not by
     reading the CSS. Pico derives heading colours per scheme — let it. */
  --pico-muted-color:#7A6E68;
  --pico-muted-border-color:#EAE3DC;
  --pico-card-background-color:#FFFFFF;
  --pico-card-border-color:#EDE6DF;
  --pico-card-sectioning-background-color:#FAF6F1;
  --pico-form-element-background-color:#FFFFFF;
  --pico-form-element-border-color:#DED5CC;
  --pico-form-element-focus-color:var(--rava-ajori);
  --pico-primary:var(--rava-ajori);
  --pico-primary-background:var(--rava-ajori);
  --pico-primary-border:var(--rava-ajori);
  --pico-primary-underline:rgba(165,67,36,.28);
  --pico-primary-hover:var(--rava-ajori-deep);
  --pico-primary-hover-background:var(--rava-ajori-deep);
  --pico-primary-hover-border:var(--rava-ajori-deep);
  --pico-primary-focus:rgba(165,67,36,.22);
  --pico-primary-inverse:#FFFFFF;
}

/* dark — warm charcoal, and the accent lifted, because ajori at its print
   value goes muddy on a dark ground and stops passing contrast */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --rava-ajori:#E08260;
    --rava-ajori-deep:#EDA184;
    --rava-ajori-tint:#2E211C;
    --pico-background-color:#191614;
    --pico-color:#EDE6E1;
    --pico-muted-color:#A2968F;
    --pico-muted-border-color:#312B27;
    --pico-card-background-color:#211D1A;
    --pico-card-border-color:#302A26;
    --pico-card-sectioning-background-color:#262120;
    --pico-form-element-background-color:#1E1A18;
    --pico-form-element-border-color:#3A332E;
    --pico-primary:var(--rava-ajori);
    --pico-primary-background:#9C3D20;
    --pico-primary-border:#9C3D20;
    --pico-primary-hover-background:#B34A28;
    --pico-primary-hover-border:#B34A28;
    --pico-primary-inverse:#FFFFFF;
    --pico-primary-focus:rgba(224,130,96,.28);
  }
}

h1,h2,h3,h4,h5,h6,th,button,[role=button],summary{font-family:"Abar Mid","Abar Low",system-ui,sans-serif}
h1,h2,h3{letter-spacing:-.012em}

/* ── 3. RTL — the corrections Pico does not ship ─────────────────────────────
   ⚠ Pico v2 has NO rtl build. It is mostly written in logical properties and
   even carries a few [dir=rtl] rules of its own, but ~8 physical declarations
   survive and they all land on things this panel uses. Verified by extracting
   every rule in pico.min.css using a physical horizontal property. */

/* the select chevron is painted right-anchored; under RTL it must move left,
   and the text padding must mirror with it, or the arrow sits on the glyphs */
[dir=rtl] select:not([multiple],[size]){
  background-position:left .75rem center;
  padding-inline-start:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
  padding-inline-end:var(--pico-form-element-spacing-horizontal);
}
/* nav pulls its first/last list flush to the edge with physical margins */
[dir=rtl] nav ol:first-of-type,[dir=rtl] nav ul:first-of-type{
  margin-left:0;margin-right:calc(var(--pico-nav-element-spacing-horizontal) * -1)}
[dir=rtl] nav ol:last-of-type,[dir=rtl] nav ul:last-of-type{
  margin-right:0;margin-left:calc(var(--pico-nav-element-spacing-horizontal) * -1)}
/* grouped controls overlap their borders leftward */
[dir=rtl] [role=group] > *:not(:first-child){
  margin-left:0;margin-right:calc(var(--pico-border-width) * -1)}
[dir=rtl] dialog>article>footer{text-align:left}

/* ⚠ Latin and digits inside an RTL run. Abar FaNum renders digits as Persian
   numerals, which is right for Farsi prose and wrong for a username, a port or
   a hex value. Anything technical gets the mono face AND an explicit ltr
   direction, or "8771" and "uid=info" come out reordered. */
.mono,code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  direction:ltr;unicode-bidi:isolate;font-size:.88em}
td.mono,th.mono{text-align:left}
input[dir=ltr],input[type=password]{direction:ltr;text-align:left}

/* ── 4. the few components Pico has no opinion about ─────────────────────── */

/* the bracket. ⚠ Drawn as an SVG path, never the character "]" — a bracket
   glyph is mirrored by the bidi algorithm inside an RTL run, so a typed one
   silently turns around and faces away from the words it should hold.
   Per Bracket Grammar: in Farsi the opening bracket sits on the RIGHT. */
.mark{height:1.55rem;width:auto;color:var(--rava-ajori);flex:none;display:block}

.brand{display:flex;align-items:center;gap:.7rem;margin:0}
.brand span{font-family:"Abar Mid";font-size:1.05rem;font-weight:600;letter-spacing:-.01em}

header.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding-block:1.1rem;margin-bottom:.4rem;
  border-bottom:1px solid var(--pico-muted-border-color)}
header.bar nav{margin:0}
header.bar nav ul{padding:0}
header.bar a{--pico-text-decoration:none;font-size:.94rem}
header.bar a[aria-current=page]{color:var(--pico-primary);font-family:"Abar Mid";font-weight:600}

/* chips — a group on a folder, a tier on a person. Quiet by default; the one
   that carries authority gets the accent, and nothing else does. */
.chip{display:inline-flex;align-items:center;gap:.35rem;
  padding:.14rem .6rem;border-radius:999px;font-size:.82rem;line-height:1.7;
  background:var(--pico-card-sectioning-background-color);
  border:1px solid var(--pico-muted-border-color);color:var(--pico-muted-color);
  white-space:nowrap}
.chip.key{background:var(--rava-ajori);border-color:var(--rava-ajori);color:#fff}
.chip.soft{background:var(--rava-ajori-tint);border-color:var(--rava-ajori-tint);
  color:var(--rava-ajori-deep)}
.chip.warn{background:#FDECEC;border-color:#F3D4D4;color:#8A2020}
@media (prefers-color-scheme:dark){
  .chip.warn{background:#33201F;border-color:#4A2C2A;color:#F0A9A5}
}
.chip form{display:inline;margin:0}
.chip button{all:unset;cursor:pointer;line-height:1;opacity:.55;font-size:.95em;padding-inline:.1rem}
.chip button:hover{opacity:1}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}

/* folder rows read as objects, not table cells — this is the screen Kian
   opened Nextcloud's admin page to use, so it has to be plainly legible */
.folder{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr auto;gap:1rem;
  align-items:center;padding:.95rem 1.1rem;
  border-bottom:1px solid var(--pico-muted-border-color)}
.folder:last-of-type{border-bottom:0}
.folder > h3{margin:0;font-size:1rem;display:flex;align-items:center;gap:.5rem}
.folder .who{font-size:.82rem;color:var(--pico-muted-color);margin:.25rem 0 0}
.folder .add{margin:0;display:flex;gap:.4rem;align-items:center}
.folder .add select{margin:0;padding-block:.35rem;font-size:.85rem;width:auto;min-width:9.5rem;
  text-overflow:ellipsis}
.folder .add button{margin:0;padding:.35rem .8rem;font-size:.85rem}
@media (max-width:720px){
  .folder{grid-template-columns:1fr;gap:.55rem}
}

article.flat{padding:0;overflow:hidden}
article.flat > header{margin:0;padding:.85rem 1.1rem}

/* two fields side by side, stacking on a phone — the add-person form is the
   only place in the panel with enough inputs to need it */
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:640px){.two{grid-template-columns:1fr}}

.muted{color:var(--pico-muted-color)}
.tiny{font-size:.82rem}
footer.note{margin-top:2.5rem;padding-top:1.1rem;font-size:.84rem;
  color:var(--pico-muted-color);border-top:1px solid var(--pico-muted-border-color)}