/* =========================================================
   Foohi — global design (mobile-first, minimalist, polished)
   Applies to: /dis/template.tecode + /dis/template_hub.tecode
   ========================================================= */

:root{
  /* --- Color system (oklch) --- */
  --k-0: oklch(0.09 0.014 40);   /* background */
  --k-1: oklch(0.12 0.014 40);
  --k-2: oklch(0.16 0.016 40);   /* large surfaces */
  --k-3: oklch(0.22 0.018 40);   /* small surfaces */
  --k-4: oklch(0.30 0.020 40);   /* elevated / hover */

  /* Glass (cool) */
  --g-0: oklch(0.34 0.030 240);  /* glass tint fill */
  --g-1: oklch(0.46 0.050 240);  /* border / highlight */
  --g-2: oklch(0.60 0.110 245);  /* accent/glow (holographic read) */

  /* Text */
  --t-0: oklch(0.92 0.010 260);  /* primary (near-neutral, crisp) */
  --t-1: oklch(0.80 0.012 260);  /* secondary */
  --t-2: oklch(0.70 0.014 260);  /* tertiary */

  /* --- Spacing levers --- */
  --u: clamp(10px, 1.1vw, 14px);
  --s0: calc(var(--u) * 0.5);
  --s1: var(--u);
  --s2: calc(var(--u) * 1.5);
  --s3: calc(var(--u) * 2);
  --s4: calc(var(--u) * 3);
  --s5: calc(var(--u) * 4);

  /* --- Geometry --- */
  --r0: 6px;
  --r1: 9px;
  --b0: 1px;
  --b1: 2px;

  /* --- Typography --- */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* --- Layout --- */
  --pad: clamp(2vw, 3.2vw, 5vw);
  --content: min(1100px, calc(100vw - (var(--pad) * 2)));

  /* --- Effects --- */
  --shadow: 0 18px 60px oklch(0.05 0.02 260 / 0.65);
  --glass:  linear-gradient(180deg, oklch(0.24 0.05 240 / 0.35), oklch(0.15 0.05 240 / 0.20));
  --grid:   linear-gradient(90deg, oklch(0.44 0.06 240 / 0.06) 1px, transparent 1px);

  /* --- Header collapse (JS can update these) --- */
  --head-pad: var(--s2);
  --head-logo: 30px;
}

/* =========================================================
   Reset + system normalization
   ========================================================= */

*,
*::before,
*::after{ box-sizing:border-box; }

html{
  color-scheme: dark;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable both-edges;
}

body{
  margin:0;
  min-height:100svh;
  font-family: var(--font);
  line-height: 1.55;
  color: var(--t-0);
  background:
    radial-gradient(1100px 800px at 30% -10%, oklch(0.22 0.03 55 / 0.35), transparent 60%),
    radial-gradient(900px 600px at 85% 10%, oklch(0.22 0.03 240 / 0.22), transparent 55%),
    linear-gradient(180deg, var(--k-0), var(--k-1));
}

img, video, canvas, svg{
  display:block;
  max-inline-size: 100%;
  block-size:auto;
}

a{
  color: var(--t-0);
  text-decoration: none;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
  &:hover{ text-decoration: underline; }
}

:focus-visible{
  outline: var(--b1) solid oklch(from var(--g-2) l c h / 0.9);
  outline-offset: 3px;
}

::selection{
  background: oklch(from var(--g-2) l c h / 0.28);
  color: var(--t-0);
}

hr{
  border:0;
  border-top: var(--b0) solid oklch(from var(--g-1) l c h / 0.35);
  margin: var(--s3) 0;
}

/* =========================================================
   App shell: header / main / footer
   ========================================================= */

body {
  display:flex;
  flex-direction:column;
}

header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, oklch(0.12 0.02 240 / 0.80), oklch(0.08 0.02 240 / 0.55));
  border-bottom: var(--b0) solid oklch(from var(--g-1) l c h / 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Template uses: <header><a href='/'>Foohi</a></header> */
  & > a{
    display:block;
    inline-size: var(--content);
    margin-inline:auto;
    padding: var(--head-pad) var(--pad);
    letter-spacing: .06em;
    font-weight: 650;
    text-transform: uppercase;
    opacity: .95;

    /* subtle logo chip */
    &::before{
      content:"";
      display:inline-block;
      inline-size: var(--head-logo);
      block-size: var(--head-logo);
      margin-right: .7em;
      border-radius: 999px;
      border: var(--b0) solid oklch(from var(--g-1) l c h / 0.38);
      background:
        radial-gradient(12px 12px at 35% 35%, oklch(from var(--g-2) l c h / 0.55), transparent 65%),
        linear-gradient(180deg, oklch(0.18 0.03 240 / 0.55), oklch(0.10 0.03 240 / 0.28));
      vertical-align: -0.35em;
    }

    &:hover{ text-decoration:none; opacity: 1; }
  }
}

/* Collapse-on-scroll hook (JS toggles html.is-scrolled) */
html.is-scrolled{
  --head-pad: var(--s1);
  --head-logo: 26px;
}

main{
  display:block;
  inline-size: var(--content);
  margin-inline:auto;
  padding: var(--s3) var(--pad);
  flex:1;
}

footer{
  margin-top: var(--s5);
  padding-block: var(--s4);
  border-top: var(--b0) solid oklch(from var(--g-1) l c h / 0.30);
  background: linear-gradient(180deg, transparent, oklch(0.10 0.02 240 / 0.55));

  & > small{
    display:block;
    inline-size: var(--content);
    margin-inline:auto;
    padding-inline: var(--pad);
    color: var(--t-1);
    letter-spacing: .04em;
    text-transform: uppercase;
  }
}

/* =========================================================
   Typography (matches templates)
   ========================================================= */

h1,h2{
  margin:0;
  line-height: 1.18;
  letter-spacing: .01em;
}

h1{
  font-size: clamp(1.55rem, 3.5vw, 2.15rem);
  margin-bottom: var(--s1);
}

h2{
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  margin-bottom: var(--s1);
  color: var(--t-0);
}

p{ margin: 0; }
main > p{ color: var(--t-1); margin-bottom: var(--s3); }

code, pre, kbd{ font-family: var(--mono); font-size: .95em; }

pre{
  margin: 0;
  padding: var(--s2);
  border-radius: var(--r1);
  background: linear-gradient(180deg, var(--k-2), var(--k-1));
  border: var(--b0) solid oklch(from var(--g-1) l c h / 0.28);
  overflow:auto;
}

/* =========================================================
   Base surfaces
   ========================================================= */

.card{
  background: var(--glass);
  border: var(--b0) solid oklch(from var(--g-1) l c h / 0.38);
  border-radius: var(--r1);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position:relative;
  overflow:hidden;

  &::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      var(--grid),
      radial-gradient(700px 200px at 10% 0%, oklch(from var(--g-2) l c h / 0.18), transparent 60%);
    opacity: .7;
    pointer-events:none;
    mix-blend-mode: screen;
  }

  & > *{ position:relative; }
}

/* =========================================================
   Forms (template.tecode)
   ========================================================= */

label{
  display:block;
  color: var(--t-1);
  font-size: .92em;
  margin: .25em 0 .35em;
}

input, select, textarea, button{ font: inherit; color: inherit; }

input[type="email"],
input[type="text"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
select,
textarea{
  inline-size: 100%;
  padding: .8em .95em;
  border-radius: var(--r0);
  background: oklch(0.12 0.02 240 / 0.25);
  border: var(--b0) solid oklch(from var(--g-1) l c h / 0.35);
  color: var(--t-0);

  &::placeholder{ color: var(--t-2); }
  &:hover{ border-color: oklch(from var(--g-1) l c h / 0.55); }
  &:focus{ border-color: oklch(from var(--g-2) l c h / 0.70); outline:none; }
}

button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .55em;
  padding: .75em 1.05em;
  border-radius: 999px;
  border: var(--b0) solid oklch(from var(--g-1) l c h / 0.40);
  background: linear-gradient(180deg, oklch(0.16 0.03 240 / 0.55), oklch(0.10 0.03 240 / 0.35));
  cursor:pointer;
  user-select:none;

  &:hover{
    border-color: oklch(from var(--g-2) l c h / 0.70);
    background: linear-gradient(180deg, oklch(0.18 0.03 240 / 0.60), oklch(0.11 0.03 240 / 0.38));
  }
  &:active{ transform: translateY(1px); }
  &:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
}

/* Template button class */
.user_action{ inline-size: 100%; }

/* =========================================================
   Template: profile creation layout
   ========================================================= */

.user_columns,
.user_spoilers{
  display:grid;
  gap: var(--s2);
  margin-top: var(--s2);
}

/* desktop: columns visible, spoilers hidden */
@media (min-width: 900px){
  .user_columns{ grid-template-columns: 1fr 1fr; align-items:start; }
  .user_spoilers{ display:none; }
}

/* mobile: spoilers visible, columns hidden */
@media (max-width: 899.98px){
  .user_columns{ display:none; }
}

/* box surface for forms */
.user_box{
  background: var(--glass);
  border: var(--b0) solid oklch(from var(--g-1) l c h / 0.38);
  border-radius: var(--r1);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--s2);

  & h2{ margin-bottom: var(--s2); }
}

/* spoilers (details/summary) */
.user_spoiler{
  border-radius: var(--r1);
  border: var(--b0) solid oklch(from var(--g-1) l c h / 0.35);
  background: oklch(0.12 0.02 240 / 0.18);
  overflow:hidden;

  & summary{
    list-style:none;
    cursor:pointer;
    padding: var(--s2);
    color: var(--t-0);
    letter-spacing:.02em;
    background: linear-gradient(180deg, oklch(0.14 0.03 240 / 0.35), oklch(0.10 0.03 240 / 0.18));
    border-bottom: var(--b0) solid oklch(from var(--g-1) l c h / 0.25);
  }

  & summary::-webkit-details-marker{ display:none; }

  & form{ padding: var(--s2); }
}

/* =========================================================
   Template: hub items list (template_hub.tecode)
   ========================================================= */

main > section[aria-label="Items"]{
  display:grid;
  gap: var(--s1);
}

/* line items */
.item{
  padding: var(--s2);
  border-radius: var(--r1);
  border: var(--b0) solid oklch(from var(--g-1) l c h / 0.25);
  background: linear-gradient(180deg, var(--k-2), var(--k-1));
  display:grid;
  gap: .45em;
}

/* card items are denser glass */
.item.card{
  background: var(--glass);
  border-color: oklch(from var(--g-1) l c h / 0.38);
  box-shadow: var(--shadow);
  overflow:hidden;

  & .visual{
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--r0);
    background:
      radial-gradient(240px 140px at 25% 25%, oklch(0.22 0.03 55 / 0.35), transparent 65%),
      linear-gradient(180deg, var(--k-3), var(--k-2));
    border: var(--b0) solid oklch(from var(--g-1) l c h / 0.22);
  }
}

/* details inside items */
.detail{
  margin: 0;
  color: var(--t-0);
  line-height: 1.45;
}

/* the template also has a likely typo: .detailt */
.detailt{
  margin: 0;
  color: var(--t-2);
  font-size: .92em;
}

/* alignment helpers */
.right{ text-align:right; }
.center{ text-align:center; }
.top{ align-self:start; }

.forced{
  /* force a "row" that can hold actions without affecting other lines */
  display:flex;
  gap: .6em;
  align-items:center;
  &.right{ justify-content:flex-end; }
}

/* sci-fi actions (icon-like spans) */
.action{
  inline-size: 34px;
  block-size: 34px;
  border-radius: 999px;
  border: var(--b0) solid oklch(from var(--g-1) l c h / 0.35);
  background: oklch(0.12 0.02 240 / 0.25);
  display:inline-grid;
  place-items:center;
  cursor:pointer;
  user-select:none;

  &:hover{
    border-color: oklch(from var(--g-2) l c h / 0.70);
    background: oklch(0.14 0.03 240 / 0.35);
  }
  &:active{ transform: translateY(1px); }
  &:focus-visible{ outline: var(--b1) solid oklch(from var(--g-2) l c h / 0.9); outline-offset: 2px; }
}

/* minimal glyphs using CSS (keeps text in allowed brightness range) */
.action::before{
  content:"";
  inline-size: 12px;
  block-size: 12px;
  border: var(--b0) solid oklch(from var(--t-0) l c h / 0.85);
  border-radius: 3px;
  opacity: .9;
}

.action.pin{
  &::before{
    inline-size: 10px;
    block-size: 10px;
    border-radius: 999px;
    box-shadow:
      0 0 0 var(--b0) oklch(from var(--t-0) l c h / 0.85) inset,
      0 0 0 6px oklch(from var(--g-2) l c h / 0.10);
  }
}

.action.delete{
  &::before{
    inline-size: 12px;
    block-size: 2px;
    border: 0;
    background: oklch(from var(--t-0) l c h / 0.85);
    border-radius: 2px;
  }
}

/* group split */
.item_group_split{
  block-size: 1px;
  background: oklch(from var(--g-1) l c h / 0.30);
  margin: var(--s2) 0;
}

/* make items feel “touchable” */
.item:hover{
  border-color: oklch(from var(--g-1) l c h / 0.45);
  background: linear-gradient(180deg, oklch(0.13 0.012 40), oklch(0.09 0.01 40));
}

.item.card:hover{
  border-color: oklch(from var(--g-2) l c h / 0.55);
}

/* =========================================================
   Responsive width trajectory (desktop opt-in improvements)
   ========================================================= */

@media (min-width: 900px){
  :root{
    --pad: clamp(3vw, 5.5vw, 8vw);
    --content: min(1200px, calc(100vw - (var(--pad) * 2)));
  }

  /* hub cards can flow in columns on wider screens */
  main > section[aria-label="Items"]{
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1200px){
  :root{
    --pad: clamp(5vw, 7.5vw, 11vw);
    --content: min(1180px, calc(100vw - (var(--pad) * 2)));
  }
}

@media (min-width: 1700px){
  :root{
    --pad: clamp(6vw, 9vw, 14vw);
    --content: min(1320px, calc(100vw - (var(--pad) * 2)));
  }
}