/* ===========================================================================
   THE TYPE LAYER — shared by the gallery, the twelve, and the 404.

   Declared once here, used differently by each application. A browser only
   downloads a face a rule actually renders, so declaring five costs nothing on
   a page that uses two.

   SELF-HOSTED, latin subset, SIL Open Font Licence. There is no <link> to
   fonts.googleapis.com anywhere in this suite and there must never be one:
   these pages promise zero network calls and run from a laptop in a room with
   no connection. A web font that fails to load takes the whole argument with
   it.

   The system, and why each is here:

     THE SERIF    the reading face in the four applications that put long text
                  on screen. A SYSTEM stack - Iowan Old Style, Palatino,
                  Georgia - and that is a decision, not a default: it is the
                  one role in the set a downloaded face cannot do better, all
                  three members are book serifs of the same colour, and it
                  costs nothing to download. See 00-DESIGN.md section 3.

     ARCHIVO      text and interface. A grotesque drawn for small sizes and
                  dense tables, with a width axis so a cramped table header is
                  COMPRESSED rather than SHRUNK. Shrinking is what everyone
                  does and it is why dense screens are unreadable.

     IBM PLEX MONO  every numeral that is data. Money, dates, reference
                  numbers, counts, percentages, coordinates. Institutional,
                  and the figures align, which is the one typographic thing an
                  officer notices without being able to name it.

     BRICOLAGE GROTESQUE  the gallery only. The index is not one of the twelve
                  and has its own voice.

     NOTO SANS ORIYA  wherever Odia appears. Not optional.

   Banned as a primary face, permanently: Inter, Roboto, Open Sans, Lato,
   Poppins, Arial, a bare system stack - and Space Grotesk, which is the most
   over-used "designer" choice there is and reads as a template.
   =========================================================================== */

@font-face{
  font-family:"Archivo";font-style:normal;font-weight:100 900;
  font-stretch:75% 125%;
  font-display:swap;src:url('fonts/archivo.woff2?v=de2f1fe817') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
    U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plex Mono";font-style:normal;font-weight:400;
  font-display:swap;src:url('fonts/plexmono-400.woff2?v=79936b18df') format('woff2');
}
@font-face{
  font-family:"Plex Mono";font-style:normal;font-weight:600;
  font-display:swap;src:url('fonts/plexmono-600.woff2?v=5a2ce77987') format('woff2');
}
@font-face{
  font-family:"Bricolage";font-style:normal;font-weight:200 800;
  font-display:swap;src:url('fonts/bricolage.woff2?v=ad33cbc6d2') format('woff2');
}
@font-face{
  font-family:"Oriya";font-style:normal;font-weight:400 700;
  font-display:swap;src:url('fonts/oriya.woff2?v=dc0fa7ca36') format('woff2');
}

/* ---------------------------------------------------------------- the stacks
   A system stack is a FALLBACK for a downloaded face. --f-serif is the one
   exception: it is a system stack ON PURPOSE, and its members are ordered so
   that a Mac gets Iowan Old Style, a Windows machine gets Palatino Linotype
   and everything else lands on Georgia. All three are book serifs of roughly
   the same colour, so the four applications that read in this face look the
   same on a demo laptop and on a Collector's desktop. */
:root{
  --f-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --f-text:"Archivo","Segoe UI",Roboto,sans-serif;
  --f-data:"Plex Mono",ui-monospace,Consolas,"Courier New",monospace;
  --f-gallery:"Bricolage","Archivo","Segoe UI",sans-serif;
  --f-odia:"Oriya","Noto Sans Oriya","Nirmala UI","Kalinga",sans-serif;
}

/* ------------------------------------------------------------- the defaults
   Anything that is a figure gets the mono and tabular figures. This is a
   single rule rather than a discipline, because a discipline gets forgotten
   on the fourteenth screen. */
.num,.n,[data-num]{
  font-family:var(--f-data);font-variant-numeric:tabular-nums;
  font-feature-settings:"ss01";letter-spacing:-.01em;
}

/* uppercase labels: never below 10.5px, always tracked out */
.lbl{
  font-family:var(--f-text);font-weight:600;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;
}

/* ------------------------------------------------------------- page load
   ONE orchestrated entrance, staggered, and nothing else. Scattered
   micro-interactions cost more and delight less. Applied by adding .rise to
   a container and .r1 .. .r6 to its children. */
@keyframes odv-rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.rise .r1,.rise .r2,.rise .r3,.rise .r4,.rise .r5,.rise .r6{
  animation:odv-rise .52s cubic-bezier(.2,0,.2,1) both;
}
.rise .r1{animation-delay:.02s}
.rise .r2{animation-delay:.08s}
.rise .r3{animation-delay:.14s}
.rise .r4{animation-delay:.20s}
.rise .r5{animation-delay:.26s}
.rise .r6{animation-delay:.32s}

@media(prefers-reduced-motion:reduce){
  .rise .r1,.rise .r2,.rise .r3,.rise .r4,.rise .r5,.rise .r6{
    animation:none;
  }
}


/* ==========================================================================
   THE CRAFT LAYER, shared by all twelve
   Appended to type.css deliberately, because type.css loads BEFORE each
   app's theme.css. Everything here is therefore a floor that an app can
   override where it has an opinion, not a ceiling imposed on it.

   WHAT WAS MEASURED, AND WHY THIS EXISTS.

   Eleven of the twelve had ZERO press feedback on any control: 237
   interactive elements between them with no transition and no active state.
   On a demo handed to a Collector on a laptop or a phone, pressing something
   and getting no acknowledgement is the single thing that makes working
   software feel broken, and it was true almost everywhere.

   All twelve had an unthemed caret, unthemed selection and a default
   scrollbar. `impeccable`'s craft floor is blunt about this: "the parts you
   did not draw still carry the design ... this is the cheapest signal that a
   page was built rather than assembled, and the one models skip most
   reliably."

   THE ACCENT IS PICKED UP, NOT IMPOSED. Each of the twelve names its accent
   differently, so the chain below asks each app what it calls its own and
   falls back to the Odvaya orange only if none of them answer. Field Office
   stays Windows blue, Mo Seba stays iOS blue, Sanjog stays Material green.
   A shared layer that repainted them would break the thing they exist to
   prove.

   NO TRANSFORMS. A scale on press would be the obvious choice and it is
   wrong here: these are dense operational screens where controls sit inside
   tables, toolbars and fixed rails, and a transform on a table cell shifts
   its neighbours. Opacity and background carry the feedback instead, which
   is safe at every density and still unmistakable under a thumb.
   ========================================================================= */

:root{
  /* whatever this app calls its accent, in the order the twelve define it */
  --odv-a:var(--accent,var(--ios-blue,var(--m-primary,var(--sel-line,#DE6B20))));
  /* Emil's canonical curves. Not approximations: the same skill that supplies
     them forbids inventing one that looks familiar. */
  --odv-out:cubic-bezier(.23,1,.32,1);
  --odv-press:.13s;
}

/* ---- BROWSER SURFACES. Four defaults that belonged to no design system. */
::selection{background:color-mix(in srgb,var(--odv-a) 28%,transparent)}
html{caret-color:var(--odv-a)}
html{scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,currentColor 22%,transparent);
  border-radius:99px;
}
::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,currentColor 38%,transparent);
}
/* a browser that cannot do color-mix gets a plain translucent grey rather
   than nothing, because a missing thumb is worse than an approximate one */
@supports not (background:color-mix(in srgb,red 10%,transparent)){
  ::selection{background:rgba(222,107,32,.28)}
  ::-webkit-scrollbar-thumb{background:rgba(128,128,128,.34)}
}

/* ---- PRESS FEEDBACK. The measured gap: 237 controls across eleven apps
   with nothing at all. Opacity and background only, never a transform:
   these controls sit in tables and toolbars where a scale moves the
   neighbours. */
button,
a[href],
[role="button"],
[role="tab"],
summary,
label.opt,
label.qopt,
input[type="checkbox"],
input[type="radio"],
select{
  transition:background var(--odv-press) var(--odv-out),
             border-color var(--odv-press) var(--odv-out),
             color var(--odv-press) var(--odv-out),
             opacity var(--odv-press) var(--odv-out),
             box-shadow var(--odv-press) var(--odv-out);
}
button:active,
a[href]:active,
[role="button"]:active,
[role="tab"]:active,
summary:active{opacity:.66}

/* a row in a table or a list is a control too, when it is clickable, and
   these apps are mostly rows */
tr[tabindex]:active,tr.on:active,[data-row]:active,.row:active{
  opacity:.8;
}

/* ---- FOCUS. A demo gets driven from a keyboard more often than anyone
   expects, and a focus ring that inherits the browser default is the first
   thing that gives away an unfinished build. */
:focus-visible{
  outline:2.5px solid var(--odv-a);
  outline-offset:2px;
  border-radius:3px;
}
/* inside a dense table the offset ring would overlap its neighbours, so it
   goes inside the cell instead */
td :focus-visible,th :focus-visible,.tool :focus-visible,
.tabbar :focus-visible,.sbar :focus-visible{outline-offset:-2px}

/* ---- DISABLED. Several of the twelve have controls that are deliberately
   inert to show a rule being enforced, and an inert control that looks
   identical to a live one is a bug in the demonstration itself. */
button:disabled,[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;
}

/* ---- every figure that is data, in every app, not only the ones each
   theme remembered */
td.n,.num,[data-num],.mono,output,time{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  button,a[href],[role="button"],[role="tab"],summary,
  label.opt,label.qopt,input[type="checkbox"],input[type="radio"],select{
    transition:none;
  }
}