/* ==================================================================
   NobleOS - shared look for every page built on assets/core.js.
   Colours, type, header, tiles, buttons, lists. New modules link this
   file instead of copying styles, so the whole hub changes together.
   ================================================================== */

:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#E4DBC6; --panel:#FFFEFA; --panel-2:#F3EDE0; --ink:#143329; --ink-2:#3b4f46;
  --line:#cfc3a8; --gold:#7f6326; --gold-soft:#f2e7cf;
  --ok:#1d6b45; --ok-bg:#e2efe6; --warn:#8a6512; --warn-bg:#f7ecd4;
  --mute:#46594f; --mute-bg:#e4dccb; --bad:#9c3b31; --bad-bg:#f6e5e1;
  --shadow:0 1px 2px rgba(20,51,41,.10),0 8px 22px rgba(20,51,41,.10);
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0c1d17; --panel:#143329; --panel-2:#18392e; --ink:#F3EEE2; --ink-2:#9db3a8;
    --line:#245043; --gold:#C6A35A; --gold-soft:#25301f;
    --ok:#7cc79c; --ok-bg:#16371f; --warn:#dfb865; --warn-bg:#352b12;
    --mute:#9db3a8; --mute-bg:#1e4437; --bad:#e08d80; --bad-bg:#3a201c;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#0c1d17; --panel:#143329; --panel-2:#18392e; --ink:#F3EEE2; --ink-2:#9db3a8;
  --line:#245043; --gold:#C6A35A; --gold-soft:#25301f;
  --ok:#7cc79c; --ok-bg:#16371f; --warn:#dfb865; --warn-bg:#352b12;
  --mute:#9db3a8; --mute-bg:#1e4437; --bad:#e08d80; --bad-bg:#3a201c;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.4);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1000px;margin:0 auto;padding:26px 18px 64px}

/* ---- header: same mark, same rule as the hub ---- */
header.top{margin-bottom:22px}
.brand{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0 14px;width:100%}
.brand .wm{grid-column:1;grid-row:1;text-align:left}
.brand .rule{grid-column:1;grid-row:2}
.mono{grid-column:2;grid-row:1;--mono:clamp(40px,9vw,54px);
  height:var(--mono);width:calc(var(--mono) * 1.2013);display:grid;place-items:center}
.mono img{width:100%;height:100%;object-fit:contain;display:block}
.brand h1{font-family:var(--serif);font-weight:600;font-size:clamp(27.6px,5.6vw,39.1px);
  margin:0;letter-spacing:-.01em;line-height:1.1}
.brand .tag{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-top:2px}
/* The OS is gold, italic and set a little apart from the word it follows.
   Run hard against the lowercase in the same weight and colour it read as a
   typo; this way it is plainly a suffix. The italic is the real one, which
   is why the font link above asks for the ital axis — a browser asked to
   slant an upright serif on its own makes a poor job of it. */
.brand h1 .os{color:var(--gold);font-style:italic;font-weight:500;
  padding-left:.18em;letter-spacing:.04em}
.rule{height:2px;width:clamp(150px,20vw,232px);margin:10px 0 18px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}
.sub{color:var(--ink-2);font-size:13px;margin:4px 0 0}

/* ---- tiles ---- */
.tiles{display:grid;gap:14px;grid-template-columns:1fr;margin-top:6px}
@media(min-width:720px){.tiles{grid-template-columns:1fr 1fr}}
.tile{display:block;text-align:left;width:100%;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px 20px 18px;box-shadow:var(--shadow);color:inherit;font:inherit;
  text-decoration:none;transition:transform .12s,box-shadow .12s,border-color .12s}
.tile:hover{transform:translateY(-2px);border-color:var(--gold);
  box-shadow:0 2px 4px rgba(20,51,41,.07),0 16px 34px rgba(20,51,41,.10)}
.tile:active{transform:none}
.tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tile h2{font-family:var(--serif);font-size:23px;font-weight:600;margin:0 0 4px;line-height:1.2}
.tile p{margin:0;color:var(--ink);font-size:13.5px;line-height:1.5}
.tile .meta{margin-top:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:600}
.tile.admin{border-style:solid;box-shadow:inset 4px 0 0 #143329,var(--shadow)}
.tile.admin .meta{color:#143329}
@media(prefers-reduced-motion:reduce){.tile{transition:none}.tile:hover{transform:none}}

/* ---- sign in ---- */
.gate{max-width:440px;margin:6vh auto 0;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:28px 24px;box-shadow:var(--shadow);text-align:center}
.gate h2{font-family:var(--serif);font-size:25.3px;margin:0 0 6px}
.gate p{color:var(--ink-2);font-size:13.5px;margin:0 0 18px}
.who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-2);margin-top:18px}
.who .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 7px}

/* ---- buttons ---- */
.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);
  font:inherit;font-size:14px;padding:10px 16px;border-radius:10px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.btn:hover{border-color:var(--gold)}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.sm{font-size:12.5px;padding:6px 11px;border-radius:8px}
.btn.ghost{background:transparent}
/* NobleOS is written the same way wherever it appears — the OS gold, italic
   and set a little apart from the word. The name is wrapped in its own span
   because a flex button treats every text node as a separate item, so an
   unwrapped OS would pick up the button's own gap instead of the hair of
   space it wants. */
.btn .os{color:var(--gold);font-family:var(--serif);font-style:italic;
  font-weight:500;font-size:1.1em;padding-left:.12em}
.btn[disabled]{opacity:.5;cursor:default}

/* ---- documents ---- */
/* The way back is a button naming where it goes, the same on every screen.
   One arrow led to a name and another to the word "Back", which is two
   habits to learn for one action. */
.back{margin-bottom:16px}
@media (min-width:1024px){.back-mob{display:none}}
.doc{display:flex;gap:14px;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:15px 16px;margin-bottom:10px;
  box-shadow:var(--shadow)}
.doc .ico{flex:0 0 38px;height:38px;border-radius:9px;background:var(--gold-soft);
  display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.04em;
  color:var(--gold);text-transform:uppercase}
.doc .body{flex:1 1 auto;min-width:0}
.doc h3{margin:0 0 2px;font-size:15px;font-weight:600}
.doc p{margin:0;font-size:13px;color:var(--ink-2)}
.doc .when{font-size:11.5px;color:var(--mute);margin-top:5px}
.doc .acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.docnote{font-size:12.5px;color:var(--ink-2);background:var(--panel-2);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin:0 0 16px}
.msg{font-size:12.5px;color:var(--ink-2);min-height:18px;margin-top:10px}
.msg.bad{color:var(--bad)}
.ft{margin-top:40px;font-size:12px;color:var(--mute);text-align:center}
.betatag{display:inline-block;vertical-align:super;margin-left:3px;font-family:var(--serif);font-style:italic;font-size:14px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--gold);border:0;padding:0;position:static;opacity:.9}
.ft{line-height:1.7}.ft .ftl{display:block}.ft .ftl.mk{font-family:var(--serif);font-style:italic;font-size:14px;color:#c6a15b}
.sh{font-family:var(--serif);font-size:23px;margin:0 0 10px}
.people{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.prow{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.prow .pn{display:flex;flex-direction:column;min-width:0}
.prow .pn span{font-size:12px;color:var(--ink-2);word-break:break-all}
.prow .fixed{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600}
.prow select,.addp select,.addp input{font:inherit;font-size:13.5px;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:7px 10px}
.addp{display:flex;gap:8px;flex-wrap:wrap}
.addp input{flex:1 1 220px;min-width:0}

/* ---- module pages ---- */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 18px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;box-shadow:var(--shadow);margin-bottom:16px}
.panel h3{font-family:var(--serif);font-size:21.8px;margin:0 0 10px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.field input,.field select,.field textarea{font:inherit;font-size:14px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold)}
.dropzone{border:1.5px dashed var(--line);border-radius:12px;padding:22px;text-align:center;cursor:pointer;color:var(--ink-2);font-size:13px;margin-bottom:12px}
.dropzone b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
.dropzone.hot{border-color:var(--gold);background:var(--gold-soft)}
.tile .soon{color:var(--mute)}
.tile.disabled{opacity:.55;cursor:default}

/* ---- Noble website look, mixed: dark header like klats.design, light working area ----
   One look on every device: the light-card palette also wins over the phone's dark mode
   (the dark palette above would put light text on the white cards). */
:root, :root[data-theme], :root:not([data-theme="light"]){
  --band:#171410; --bg:#171410; --panel:#F7F0DF; --panel-2:#EEE5D0; --ink:#171410; --ink-2:#4a4237;
  --line:#d6cab2; --gold:#8a6a2c; --gold-soft:#f1e6cc;
  --ok:#1d6b45; --ok-bg:#dcefe3; --warn:#7a5310; --warn-bg:#f7e9c9;
  --mute:#4f4a40; --mute-bg:#e6dfd1; --bad:#9c3b31; --bad-bg:#f6e0dc;
  --shadow:0 1px 2px rgba(23,20,16,.10),0 8px 22px rgba(23,20,16,.10);
  color-scheme:light;
}
html,body{overflow-x:hidden}@supports (overflow-x:clip){html,body{overflow-x:clip}}
body{background:var(--bg);color:var(--ink)}
/* the dark band across the top, as on the website */
header.top{position:relative;color:#f3ecdd;padding-bottom:18px}
header.top::before{content:"";position:absolute;top:-40px;bottom:0;left:-100vw;right:-100vw;background:var(--band);z-index:-1;
  border-bottom:1px solid rgba(198,161,91,.45)}
header.top .brand h1{color:#f3ecdd}
header.top .brand h1 .os,header.top .tag{color:#c6a15b}
header.top .rule{background:linear-gradient(90deg,#c6a15b,transparent)}
header.top .sub{color:#c4bba9}
header.top .btn{background:transparent;color:#f3ecdd;border-color:rgba(220,198,158,.35)}
header.top .btn:hover{border-color:#c6a15b}
header.top .btn.primary{background:#c6a15b;color:#171410;border-color:#c6a15b}
header.top .btn .os{color:#c6a15b}
header.top + .back,header.top ~ .back{margin-top:18px}
.betatag{color:#c6a15b}
.btn.primary{background:#171410;color:#f3ecdd;border-color:#171410}
.tile.admin{box-shadow:inset 4px 0 0 #c6a15b,var(--shadow)}
.tile.admin .meta{color:var(--gold)}
.rowline a,.sheet a:not(.btn){color:#6e521d}
/* ---- one solid background for the whole page, light cards on it ---- */
:root, :root[data-theme]{ --band:var(--bg); }
header.top::before{border-bottom:0}
/* text that sits straight on the background, outside any card */
body > .wrap > .sub,.wrap > .sub,.stats,.stats b,.group h2,.rejnote,.regnote,.ft,.who,.sh,
#home > .who,.empty,.mention summary,label.switch .switchlbl,.wrap > h3{color:#efe8d8 !important}
.group h2::after{background:rgba(239,232,216,.25) !important}
.stats b{color:#fff !important}
.rejnote a,.rejnote .linkish,.regnote .linkish{color:#e3c88f !important}
.btn.back,a.back,#btnHome{background:transparent;color:#efe8d8;border-color:rgba(239,232,216,.35)}
.btn.back .os,a.back .os,#btnHome .os{color:#c6a15b}
.mention{border-top-color:rgba(239,232,216,.25)}
.who .btn{background:transparent !important;color:#efe8d8 !important;border-color:rgba(239,232,216,.35) !important}
.filters .btn.ghost,#btnClear{background:transparent !important;color:#efe8d8 !important;border-color:rgba(239,232,216,.35) !important}
/* ---- background photograph: Noble's own car (J555 NCT), dimmed; no band at the top ---- */
:root, :root[data-theme]{ --band:#171410; }
header.top::before{border-bottom:1px solid rgba(198,161,91,.45) !important}
/* the photo sits on its own fixed layer: iPhone Safari ignores background-attachment:fixed and would stretch it down the whole page */
body{background:#171410 !important}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(rgba(23,20,16,.76),rgba(23,20,16,.88)),url('img/bg-noble.jpg') center/cover no-repeat,#171410}

/* iPhone: Safari zooms in when a field under 16px is tapped, and the page then hangs off the screen;
   date and time fields keep to their box (Safari gives them a minimum width of their own) */
@media (max-width:820px){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px !important}}
input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;min-height:2.6em}
input,select,textarea{max-width:100%}

/* "Noble" + the gold OS tile: the same tile as on the app icon */
.ostab{display:inline-block;font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;font-style:normal;font-weight:600;font-size:.42em;line-height:1;
  letter-spacing:.07em;color:#17130e;background:linear-gradient(135deg,#a8884a,#ecd49a 42%,#c9a45c 64%,#94742f);border-radius:.32em;
  padding:.36em .48em .32em;margin-left:.3em;margin-right:.1em;vertical-align:.08em;text-transform:uppercase}
.btn .ostab,a .ostab{font-size:.74em;padding:.3em .42em .26em;margin-left:.3em;vertical-align:.06em}

/* an element marked hidden stays hidden, whatever its class says (e.g. .btn sets display) */
[hidden]{display:none !important}

/* ---- the bar under the header on every module page: Home and the four groups (Piotr, 25 Oct 2026) ---- */
.hubnav{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 18px;position:relative;z-index:20}
.hubnav > a,.hubnav summary{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--sans);color:#efe6d3;
  background:rgba(20,17,13,.55);border:1px solid rgba(201,164,92,.45);border-radius:999px;padding:6px 14px;cursor:pointer;
  text-decoration:none;list-style:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);user-select:none}
.hubnav summary::-webkit-details-marker{display:none}
.hubnav summary span{font-size:10px;opacity:.75}
.hubnav > a:hover,.hubnav summary:hover,.hubnav details[open] summary{border-color:#c9a45c;background:rgba(20,17,13,.8)}
.hubnav .cur summary{background:#c9a45c;color:#14110d;border-color:#c9a45c}
.hubnav details{position:relative}
.hubnav details[open]{z-index:40}
.hubnav .hn-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;background:#fffcf7;border:1px solid #e5dccd;border-radius:14px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.55);padding:6px;display:flex;flex-direction:column}
.hubnav .hn-menu a{color:#1c1813;text-decoration:none;font-size:14px;padding:9px 12px;border-radius:9px}
.hubnav .hn-menu a:hover,.hubnav .hn-menu a:focus-visible{background:#f3ead8}
.hubnav .hn-menu a[aria-current]{font-weight:700;color:#8a6a2c}
@media (max-width:600px){ .hubnav .hn-menu{position:fixed;left:12px;right:12px;top:auto;min-width:0} .hubnav > a,.hubnav summary{padding:6px 11px;font-size:12.5px} }

/* a slimmer top on every module (26 Oct 2026: on a phone the header, back button and menu filled the first screen) */
@media (max-width:700px){
  header.top{padding-bottom:10px;margin-bottom:12px}
  header.top .sub{display:none}
  header.top .rule{margin:6px 0 4px}
  .brand h1{font-size:25px}
  .brand .tag{font-size:10px;letter-spacing:.18em}
  .hubnav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px 12px;padding:0 16px}
  .hubnav::-webkit-scrollbar{display:none}
  .hubnav > a,.hubnav summary{white-space:nowrap}
  .wrap > .back{margin-top:4px !important;margin-bottom:10px;padding:6px 11px;font-size:12.5px}
}