/* Irzaverse skin for 1time.io v0.9.0, NERV Terminal UI Kit v3.0, 2026-09-16.
   Injected by nginx sub_filter on </head>. Upstream ships a LIGHT theme driven
   entirely by :root variables, so per kit §14 the remap does most of the work
   and explicit rules only cover what variables cannot reach - ground, fonts,
   chamfer, the filled primary button and the panel edges.
   Fonts and the honeycomb tile are shared under /brand/. */

@font-face { font-family: "EVA-Matisse"; src: url("/brand/fonts/EVA-Matisse_Standard-latin.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "04b03"; src: url("/brand/fonts/04B_03__.TTF") format("truetype"); font-display: block; }

:root {
  color-scheme: dark;

  --iz-surface-1:#0E1420; --iz-surface-2:#090D16; --iz-surface-3:#141C2B;
  --iz-ink-strong:#E6ECF5; --iz-ink:#A7B3C6; --iz-ink-muted:#7C8799;
  --iz-line:rgba(166,182,204,.28); --iz-line-bright:rgba(227,179,65,.55);
  --iz-accent:#E3B341; --iz-accent-soft:rgba(227,179,65,.16);
  --iz-terminal:#5FD3C8;
  --iz-panel:linear-gradient(180deg,#101827,#0C1220);
  --iz-mono:"JetBrains Mono","IBM Plex Mono","Cascadia Mono",Consolas,monospace;
  --iz-chamfer-lg:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);

  /* --- upstream's own variables, remapped (kit §14) ----------------------- */
  --bg:#05070D;
  --surface:#0E1420;
  --text:#E6ECF5;
  --text-secondary:#A7B3C6;
  --text-muted:#7C8799;
  --accent:#E3B341;              /* was burnt orange -> the one gold */
  --accent-hover:#FFD873;
  --accent-light:rgba(227,179,65,.16);
  --border:rgba(166,182,204,.28); /* the single hairline (rule 01)   */
  --success:#4FD1A1;
  --success-hover:#7FE0BC;
  --border-focus:#E3B341;
  --focus-ring:rgba(227,179,65,.75);
  --danger:#FF4A2D;
  --warning:#E3B341;              /* warning shares gold (§2)        */
  --share-accent-ring:rgba(227,179,65,.16);
  /* Rule 05: chamfered, never rounded. */
  --radius:0; --radius-sm:0; --radius-lg:0;
  /* Rule 02: depth is tonal, never cast. */
  --shadow:none; --shadow-sm:none;
  --font-display:"EVA-Matisse","Yu Mincho","Hiragino Mincho ProN",serif;
  --font-body:Inter,"Helvetica Neue",Arial,sans-serif;
  --transition:160ms cubic-bezier(.2,.8,.2,1);
}

/* Ground (kit §2). */
html { background: radial-gradient(ellipse at 50% 40%, #0A1020 0%, #05070D 70%) !important; background-attachment: fixed !important; }
body { background: transparent !important; color: var(--iz-ink) !important; }
body::before { content:""; position:fixed; top:-96px; left:-56px; right:-56px; bottom:-96px; z-index:-1; pointer-events:none;
  opacity:.07; background:url(/brand/hex.svg) repeat; background-size:55.4256px 96px; animation: iz-drift 55.4256s linear infinite; }
@keyframes iz-drift { to { transform: translate(55.4256px, 96px); } }
html::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.14) 2px 3px); mix-blend-mode: multiply; }
@media (max-width: 50em) {
  body::before { display:none; }
  html::after { background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.08) 2px 3px); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation:none; } html::after { background:none; } }

/* Belt and braces on geometry: anything still carrying a literal radius. */
.btn, .card, .panel, input, textarea, select, button, .link-display, .app-nav,
.share-mode-nav, .share-mode-nav *, [class*="radius"], [class*="rounded"] { border-radius: 0 !important; }
/* Shadows are prohibited at every level (rule 02). */
* { box-shadow: none; }

/* Header is a status strip (§6): hairline beneath, no box. */
.app-header { background: transparent !important; border-bottom: 1px solid var(--iz-line); }
.app-nav { background: transparent !important; border: 0 !important; }
.app-nav a, .app-nav button { color: var(--iz-ink-muted); font-family: var(--iz-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: .08em; }
.app-nav a:hover { color: var(--iz-ink-strong); }

/* Titles take the display face; never gold (rule 06). */
h1, h2, .app-title, .hero-title {
  font-family: "EVA-Matisse","Yu Mincho",serif !important; font-weight: 800 !important;
  color: var(--iz-ink-strong) !important; letter-spacing: .03em; text-transform: uppercase;
}
h1 { font-size: 36px !important; line-height: 1.05 !important; }
h2 { font-size: 26px !important; line-height: 1.10 !important; text-transform: none; }
h3 { font-family: Inter,sans-serif !important; font-weight: 600 !important; color: var(--iz-ink-strong) !important; }

/* The result panel is the primary surface: gold left edge, lit top, chamfer. */
.link-display, .card, .panel {
  background: var(--iz-panel) !important;
  border: 1px solid var(--iz-line) !important;
  border-top-color: var(--iz-line-bright) !important;
  border-left: 2px solid var(--iz-accent) !important;
  clip-path: var(--iz-chamfer-lg);
  padding: 24px !important;
}
/* Panel header strip: 12px mono uppercase label, hairline beneath (§5). */
.link-ready-header, .link-display-label {
  font-family: var(--iz-mono) !important; font-size: 12px !important;
  text-transform: uppercase; letter-spacing: .08em; color: var(--iz-ink-muted) !important;
}
.link-ready-header { border-bottom: 1px solid var(--iz-line); padding-bottom: 12px; margin-bottom: 16px; }

/* The generated link is data: mono, terminal-tinted readout (§3, rule 06). */
.link-display input, .link-display code, .link-output, [data-link-value], .secret-link {
  font-family: var(--iz-mono) !important; color: var(--iz-terminal) !important;
  background: rgba(95,211,200,.12) !important; border: 1px solid var(--iz-line) !important;
  word-break: break-all;
}

/* Inputs: recessed well, groove hairline, gold caret (§6). */
input, textarea, select {
  background: #090D16 !important; color: var(--iz-ink-strong) !important;
  border: 1px solid rgba(166,182,204,.18) !important; caret-color: var(--iz-accent);
  font-family: Inter,sans-serif;
}
.form-textarea, .secret-textarea { font-family: var(--iz-mono) !important; font-size: 13px; }
input::placeholder, textarea::placeholder { color: var(--iz-ink-muted) !important; }
/* Duration and views. Upstream gives these selects padding:0 on a transparent
   borderless field; the generic input rule above puts them in a recessed well,
   so the text sat on the hairline. field-sizing:content means this widens the
   control by 4px rather than eating into it. */
.share-option-select { padding: 0 2px !important; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: none !important; border-color: var(--iz-accent) !important;
  box-shadow: 0 0 0 3px rgba(227,179,65,.18) !important;
}

/* Buttons (§6): one hairline style, no fill. Upstream fills .btn-primary with
   the accent; gold as a fill is prohibited (§8). */
.btn, .btn-primary, .btn-secondary, .btn-lg, button, .share-passphrase-add {
  background: transparent !important; background-image: none !important;
  color: var(--iz-ink-strong) !important;
  border: 1px solid var(--iz-line) !important;
  font-family: Inter,sans-serif !important; font-weight: 600 !important;
  font-size: 12px !important; letter-spacing: .06em !important; text-transform: uppercase !important;
  min-height: 40px; padding: 0 14px !important; cursor: pointer;
  transition: color 100ms cubic-bezier(.2,.8,.2,1), border-color 100ms cubic-bezier(.2,.8,.2,1);
}
.btn:hover, .btn-primary:hover, button:hover, .share-passphrase-add:hover {
  border-color: var(--iz-accent) !important; color: var(--iz-accent-bright) !important; background: transparent !important;
}
.btn:active, .btn-primary:active, button:active {
  background: var(--iz-accent-soft) !important; border-color: var(--iz-accent) !important;
}
.btn:disabled, button:disabled { color: var(--iz-ink-muted) !important; border-color: rgba(166,182,204,.18) !important; cursor: default; }
/* Destructive keeps the shape, takes danger text and edge (§6). */
.btn-danger, .btn-destructive, [data-destructive] {
  color: var(--iz-danger) !important; border-color: rgba(255,74,45,.55) !important;
}

/* Submit column. Upstream sizes this grid track at minmax(190px,32%) while
   .btn is white-space:nowrap, so any label wider than the track overflows and
   the Ctrl+Enter chip is clipped at the right edge. Only the text-secret
   button carries that chip, which is why the file form looks fine. Size the
   track to its content instead - the options line is minmax(0,1fr) and already
   wraps. */
@media (min-width: 640px) {
  .share-options-controls { grid-template-columns: minmax(0,1fr) minmax(190px,max-content) !important; }
}
/* The chip margin is -0.35em on the right, sized for upstream 28px button
   padding, not the kit 14px. */
.btn-kbd { margin-right: 0 !important; opacity: .55 !important; }

/* Mode tabs are never boxed like buttons; selected carries the gold underline
   and accent-soft (kit §14). */
.share-mode-nav { border-bottom: 1px solid var(--iz-line); gap: 0; }
.share-mode-nav button, .share-mode-nav a {
  border: 0 !important; background: transparent !important; min-height: 40px;
  color: var(--iz-ink-muted) !important;
}
.share-mode-nav [aria-selected="true"], .share-mode-nav .is-active, .share-mode-nav button.active {
  color: var(--iz-ink-strong) !important; background: var(--iz-accent-soft) !important;
  box-shadow: inset 0 -2px 0 var(--iz-accent) !important;
}

/* Status and counters are mono readouts (§3). */
.countdown, .expiry, .status, .meta, time, .char-count, [data-countdown] {
  font-family: var(--iz-mono) !important; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--iz-ink-muted) !important; font-variant-numeric: tabular-nums;
}

a { color: var(--iz-ink-strong); text-underline-offset: 3px; }
a:hover { color: var(--iz-accent-bright); }

footer, .app-footer { color: var(--iz-ink-muted) !important; font-family: var(--iz-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: .10em; border-top: 1px solid var(--iz-line); }

* { scrollbar-color: var(--iz-line) transparent; scrollbar-width: thin; }
