/* onlyati-ui extras: the personal-site pieces from attilamolnar.dev. A sidebar shell with GNOME
   Settings style hue tiles, per-section accent hues, hero, section bars, timeline, level meter
   the "desk" mode where the whole site floats as one window on wide screens, and the dark app
   bar (AppBarProps.Dark). */

@layer onlyati {
  /* ---------- hue tiles ---------- */
  .tile {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    color: var(--tile-glyph);
    background: var(--tile-bg, var(--section-tile));
  }

  .tile svg.icon {
    width: 16px;
    height: 16px;
  }

  .tile.lg {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .tile.lg svg.icon {
    width: 22px;
    height: 22px;
  }

  .hue-blue {
    --tile-bg: var(--hue-blue-tile);
  }

  .hue-teal {
    --tile-bg: var(--hue-teal-tile);
  }

  .hue-purple {
    --tile-bg: var(--hue-purple-tile);
  }

  .hue-orange {
    --tile-bg: var(--hue-orange-tile);
  }

  .hue-green {
    --tile-bg: var(--hue-green-tile);
  }

  .hue-pink {
    --tile-bg: var(--hue-pink-tile);
  }

  /* A section's hue drives every accent inside it (links, buttons, dots, eyebrows). Put it on a
     container that survives hx-boost swaps (e.g. .shell), not on body. */
  [data-section="blue"] {
    --accent-primary: var(--hue-blue-ink);
    --section-tile: var(--hue-blue-tile);
  }

  [data-section="teal"] {
    --accent-primary: var(--hue-teal-ink);
    --section-tile: var(--hue-teal-tile);
  }

  [data-section="purple"] {
    --accent-primary: var(--hue-purple-ink);
    --section-tile: var(--hue-purple-tile);
  }

  [data-section="orange"] {
    --accent-primary: var(--hue-orange-ink);
    --section-tile: var(--hue-orange-tile);
  }

  [data-section="green"] {
    --accent-primary: var(--hue-green-ink);
    --section-tile: var(--hue-green-tile);
  }

  [data-section="pink"] {
    --accent-primary: var(--hue-pink-ink);
    --section-tile: var(--hue-pink-tile);
  }

  /* ---------- shell: sidebar + content ---------- */
  .shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: calc(100vh - var(--appbar-height));
  }

  .shell-side {
    background: var(--bg-surface);
    border-inline-end: 1px solid var(--border-muted);
    padding: var(--sp-3);
  }

  .shell-side nav {
    position: sticky;
    top: calc(var(--appbar-height) + var(--sp-3));
  }

  .shell-side ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .shell-side a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-control);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
  }

  .shell-side a:hover {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
  }

  .shell-side a[aria-current="page"] {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
    font-weight: 700;
  }

  .shell-main {
    padding: var(--sp-8) clamp(var(--sp-4), 4vw, var(--sp-12)) var(--sp-12);
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    max-width: 1080px;
    width: 100%;
    min-width: 0;
  }

  .site-footer {
    border-top: 1px solid var(--border-muted);
    padding-top: var(--sp-6);
    color: var(--text-secondary);
    font-size: 0.85rem;
  }

  /* ---------- section bar & hero ---------- */
  .section-bar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .section-bar::before,
  .hero-title::before {
    content: "";
    width: 36px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--section-tile);
    margin-bottom: var(--sp-1);
  }

  .section-bar p {
    color: var(--text-secondary);
    max-width: var(--measure);
  }

  .hero {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .hero-head {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
  }

  .hero-title {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 0;
  }

  .hero .headline {
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    max-width: var(--measure);
  }

  .portrait {
    flex: none;
    width: clamp(88px, 22vw, 160px);
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-card);
    border: 1px solid var(--border-muted);
    background: var(--bg-surface-alt);
    box-shadow: var(--shadow-soft);
  }

  /* ---------- timeline ---------- */
  .timeline {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    border-inline-start: 2px solid var(--border-muted);
    margin-inline-start: var(--sp-2);
  }

  .timeline > li {
    position: relative;
    padding-inline-start: var(--sp-6);
    min-width: 0;
  }

  .timeline > li::before {
    content: "";
    position: absolute;
    inset-inline-start: -7px;
    top: 1.25rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-canvas);
    border: 2px solid var(--accent-primary);
  }

  .timeline > li.current::before {
    background: var(--status-completed);
    border-color: var(--status-completed);
  }

  .timeline .when {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-secondary);
  }

  /* ---------- level meter ---------- */
  .meter-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .meter-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    padding-block: var(--sp-2);
    border-bottom: 1px solid var(--border-muted);
  }

  .meter-list li:last-child {
    border-bottom: none;
  }

  .meter-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .meter-name small {
    color: var(--text-secondary);
    font-size: 0.8rem;
  }

  .meter {
    display: inline-flex;
    justify-self: end;
    white-space: nowrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.8rem;
    color: var(--text-secondary);
  }

  .meter-dots {
    display: inline-flex;
    gap: 3px;
  }

  .meter-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--accent-primary);
  }

  .meter-dots span.on {
    background: var(--accent-primary);
  }

  /* ---------- desk mode ---------- */
  /* <body class="desk">: on wide, tall screens the whole site is one centered floating window on
     a darker desk; the window scrolls inside so the app bar stays put without sticky. */
  @media (min-width: 1024px) and (min-height: 560px) {
    body.desk {
      background: var(--bg-desk);
    }

    .desk-window {
      display: flex;
      flex-direction: column;
      width: min(1200px, calc(100% - 2 * var(--sp-8)));
      height: min(calc(100dvh - 2 * var(--sp-8)), 1100px);
      margin: var(--sp-8) auto;
      background: var(--bg-canvas);
      border: 1px solid var(--border-muted);
      border-radius: 14px;
      box-shadow: var(--shadow-desk);
      overflow: hidden;
    }

    .desk-window > .appbar {
      position: static;
      flex: none;
      width: 100%;
      max-width: none;
      margin: 0;
      border-width: 0 0 1px;
      border-radius: 0;
      box-shadow: none;
    }

    .desk-window > .shell {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .desk-window .shell-side nav {
      top: var(--sp-3);
    }
  }

  /* ---------- responsive ---------- */
  /* tablet: a narrower sidebar */
  @media (max-width: 1023px) {
    .shell {
      grid-template-columns: 200px minmax(0, 1fr);
    }

    .shell-side a {
      gap: var(--sp-2);
    }
  }

  /* phone: the sidebar becomes a horizontally scrolling bar under the app bar; ui.js keeps the
     current item in view */
  @media (max-width: 599px) {
    .shell {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto 1fr;
    }

    .shell-side {
      position: sticky;
      top: var(--appbar-height);
      z-index: 4;
      border-inline-end: none;
      border-bottom: 1px solid var(--border-muted);
      padding: var(--sp-2);
      overflow-x: auto;
      scrollbar-width: none;
    }

    .shell-side nav {
      position: static;
    }

    .shell-side ul {
      flex-direction: row;
      gap: var(--sp-1);
    }

    .shell-side a {
      padding: var(--sp-2) var(--sp-3);
      font-size: 0.9rem;
    }

    .shell-side .tile {
      width: 22px;
      height: 22px;
      border-radius: 6px;
    }

    .shell-side .tile svg.icon {
      width: 14px;
      height: 14px;
    }

    .shell-main {
      padding-top: var(--sp-6);
      gap: var(--sp-8);
    }

    .hero-head {
      gap: var(--sp-4);
    }

    .meter-list li {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-1);
    }

    .meter {
      justify-self: start;
    }
  }

  @media (pointer: coarse) {
    .shell-side a {
      min-height: var(--touch-target);
    }
  }

  /* ---------- dark app bar (AppBarProps.Dark) ---------- */
  /* An ink bar with inverted controls (the attilamolnar.dev look). */
  .appbar.dark {
    background: var(--bg-chrome);
    color: var(--text-on-chrome);
    border-color: var(--bg-chrome);
  }

  .appbar.dark .appbar-nav a {
    color: color-mix(in srgb, var(--text-on-chrome) 75%, transparent);
  }

  .appbar.dark .appbar-nav a:hover,
  .appbar.dark .appbar-nav a[aria-current="page"] {
    background: var(--hover-on-chrome);
    color: var(--text-on-chrome);
  }

  .appbar.dark .btn.primary {
    background: var(--text-on-chrome);
    color: var(--bg-chrome);
  }

  .appbar.dark .btn.secondary,
  .appbar.dark .appbar-menu-btn {
    border-color: var(--border-on-chrome);
    color: var(--text-on-chrome);
  }

  .appbar.dark .btn.secondary:hover {
    background: var(--hover-on-chrome);
  }

  .appbar.dark :focus-visible {
    outline-color: var(--text-on-chrome);
  }

  .appbar.dark .segmented {
    background: transparent;
    border-color: var(--border-on-chrome);
  }

  .appbar.dark .segmented > label {
    color: color-mix(in srgb, var(--text-on-chrome) 75%, transparent);
  }

  .appbar.dark .segmented > input:checked + label {
    background: var(--text-on-chrome);
    color: var(--bg-chrome);
  }

  @media (max-width: 1023px) {
    .appbar.dark .appbar-menu-btn:hover {
      background: var(--hover-on-chrome);
    }

    /* inside the light sheet, a dark bar's inverted buttons go back to normal */
    .appbar.dark .appbar-menu .btn.secondary {
      border-color: var(--border-muted);
      color: var(--text-primary);
    }

    .appbar.dark .appbar-menu .btn.primary {
      background: var(--accent-primary);
      color: var(--accent-primary-ink);
    }
  }
}