/*
 * RitualOS Fluent.
 *
 * The Windows 10 identity, kept in one file so it can be tuned without touching the component
 * structure in components.css. Loaded last within @layer components, so it restyles the same
 * components rather than duplicating them. components.css owns sizes and layout; this file
 * owns the skin: colour, edge, motion.
 *
 * What makes something read as Windows 10 Fluent, as opposed to generic flat design:
 *
 *   1. Neutral surfaces. Content sits on a plain grey or white pane. Colour is the accent,
 *      and it appears on exactly the things that are selected, active or primary.
 *   2. Square. Windows and menus have no radius; controls have 2px. Nothing is a pill.
 *   3. One hairline. A 1px border in a low-alpha neutral separates panes; there is no bevel,
 *      no gloss seam, no rim light.
 *   4. Acrylic only on chrome. The taskbar, Start, flyouts and the Action Center blur the
 *      desktop behind them. Content cards never do.
 *   5. Reveal, not lift. A hover brightens the face and draws the border; it does not move
 *      the element or cast a bigger shadow.
 *   6. Fast, decelerating motion. Things arrive in 167ms and leave faster.
 *
 * Every looping animation here is switched off under prefers-reduced-motion at the bottom of
 * the file, rather than merely shortened by the global rule in base.css.
 */

@layer components {

  /* ══ panes ════════════════════════════════════════════════════════════════════════════════
     Applied through a selector list rather than a utility class, so all the existing page
     markup picks it up unedited -- including .glass-card, which the app used everywhere. */
  .card,
  .glass-card,
  .z-stat,
  .z-table-wrap,
  .z-modal,
  .auth-container,
  .z-seg,
  .nav-rpg-status {
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    box-shadow: none;
  }

  .card--raised { background: var(--surface-3); box-shadow: var(--shadow-2); }
  .card--inset  { background: var(--surface-raise-1); box-shadow: none; }
  .card--accent {
    background: var(--surface-2);
    border-color: var(--accent-line);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .card--interactive,
  a.z-stat,
  .glass-card {
    transition: background var(--dur) var(--ease-decel),
                border-color var(--dur) var(--ease-decel);
  }
  .card--interactive:hover,
  a.z-stat:hover,
  .glass-card:hover {
    transform: none;
    background: var(--surface-3);
    border-color: var(--border-strong);
    box-shadow: none;
  }

  /* Text on a pane needs no halo any more; the pane is opaque. */
  .card h1, .card h2, .card h3, .card h4,
  .glass-card h1, .glass-card h2, .glass-card h3, .glass-card h4,
  .page-head__title,
  .z-win__title,
  .brand,
  .menu-category,
  .z-section__title {
    text-shadow: none;
  }

  /* The page header strip: a Windows app header, not a hero. */
  .page-head {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    box-shadow: none;
    padding: var(--sp-3) 0 var(--sp-4);
  }
  .page-head__title { font-weight: var(--fw-semilight); font-size: var(--fs-2xl); }
  .page-head__sub   { font-size: var(--fs-sm); }
  .page-head__icon  { font-size: 1.5rem; }


  /* ══ controls ═════════════════════════════════════════════════════════════════════════════
     The Windows button is a flat face with a 1px border that appears on hover and a face that
     darkens on press. The accent button is the primary; everything else is neutral. */
  .btn {
    position: relative;
    overflow: visible;
    min-height: 32px;
    padding: 0.35rem 0.9rem;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    background-image: none;
    background-color: var(--accent);
    color: var(--accent-contrast);
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    font-size: var(--fs-md);
    line-height: 1.25;
    box-shadow: none;
    transition: background-color var(--dur-fast) var(--ease-decel),
                border-color var(--dur-fast) var(--ease-decel),
                color var(--dur-fast) var(--ease-decel);
  }
  .btn::after { display: none; }
  .btn:hover {
    transform: none;
    opacity: 1;
    filter: none;
    background-color: var(--accent-light1);
    border-color: var(--accent-light2);
    box-shadow: none;
  }
  .btn:active {
    transform: none;
    filter: none;
    background-color: var(--accent-dark1);
    border-color: transparent;
    box-shadow: none;
  }

  .btn-secondary {
    background-color: var(--surface-4);
    border-color: var(--border-subtle);
    color: var(--text-primary);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .btn-secondary:hover  { background-color: var(--surface-4); border-color: var(--border-strong); }
  .btn-secondary:active { background-color: var(--surface-3); border-color: var(--border-subtle); }

  .btn-ghost {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    color: var(--text-secondary);
    box-shadow: none;
  }
  .btn-ghost:hover  { background-color: var(--surface-raise-2); border-color: transparent; color: var(--text-primary); }
  .btn-ghost:active { background-color: var(--surface-raise-3); }

  .btn-danger  { background-color: var(--close-red); border-color: transparent; color: #fff; }
  .btn-danger:hover  { background-color: color-mix(in oklab, var(--close-red), white 12%); border-color: transparent; }
  .btn-danger:active { background-color: color-mix(in oklab, var(--close-red), black 14%); }
  .btn-success { background-color: var(--success); border-color: transparent; color: #0b1a0b; }
  .btn-success:hover { background-color: color-mix(in oklab, var(--success), white 12%); border-color: transparent; }

  .btn-sm { min-height: 28px; padding: 0.2rem 0.7rem; font-size: var(--fs-sm); }
  .btn-xs { min-height: 24px; padding: 0.1rem 0.5rem; font-size: var(--fs-xs); }
  .btn-icon { padding-inline: 0.55rem; }

  .btn:disabled, .btn[disabled] { opacity: 0.45; }

  /* The Windows text box: a hairline all round, and an accent underline while focused. */
  .form-control {
    min-height: 32px;
    padding: 0.35rem 0.6rem;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    box-shadow: inset 0 -1px 0 var(--border-strong);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: border-color var(--dur-fast) var(--ease-decel),
                box-shadow var(--dur-fast) var(--ease-decel),
                background var(--dur-fast) var(--ease-decel);
  }
  .form-control:hover { border-color: var(--text-muted); }
  .form-control:focus {
    background: var(--surface-2);
    border-color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--accent);
    outline: none;
  }
  .form-control::placeholder { color: var(--text-muted); }
  [data-theme="light"] .form-control { background: #ffffff; }
  @media (prefers-color-scheme: light) {
    [data-theme="system"] .form-control { background: #ffffff; }
  }

  .form-group label { color: var(--text-secondary); font-size: var(--fs-sm); }

  /* Native check boxes and radios take the accent; 20px is the Windows size. */
  input[type="checkbox"],
  input[type="radio"] {
    accent-color: var(--accent);
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }
  input[type="range"] { accent-color: var(--accent); }

  /* Tabs are a Pivot: a text header with a 2px accent underline. The pill and rail variants
     become a Pivot and a NavigationView respectively. */
  .z-tabs__nav { border-bottom-color: var(--border-subtle); gap: 0; }
  .z-tabs__btn {
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    color: var(--text-muted);
    border-bottom-width: 2px;
  }
  .z-tabs__btn:hover { color: var(--text-primary); background: var(--surface-raise-1); }
  .z-tabs__btn.is-active { color: var(--text-primary); border-bottom-color: var(--accent); font-weight: var(--fw-semi); }

  .z-tabs--pill .z-tabs__nav {
    background: none;
    padding: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--border-subtle);
    gap: 0;
  }
  .z-tabs--pill .z-tabs__btn { border-radius: 0; border-bottom: 2px solid transparent; padding: var(--sp-2) var(--sp-3); }
  .z-tabs--pill .z-tabs__btn.is-active {
    background: none;
    box-shadow: none;
    border-bottom-color: var(--accent);
    color: var(--text-primary);
  }

  .z-tabs--rail .z-tabs__nav {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    gap: 2px;
  }
  .z-tabs__rail-header {
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--sp-1) var(--sp-2) var(--sp-2);
  }
  .z-tabs--rail .z-tabs__btn {
    min-height: 40px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    border-bottom: 0;
    color: var(--text-secondary);
  }
  .z-tabs--rail .z-tabs__btn:hover { background: var(--surface-raise-2); color: var(--text-primary); }
  .z-tabs--rail .z-tabs__btn.is-active {
    background: var(--surface-raise-2);
    color: var(--text-primary);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .z-tabs--rail.is-collapsed .z-tabs__btn {
    min-height: 40px;
    height: 40px;
    width: 40px;
    padding: 0;
  }
  .z-tabs--rail.is-collapsed .z-tabs__btn.is-active {
    box-shadow: inset 3px 0 0 var(--accent);
  }
  @media (max-width: 899px) {
    .z-tabs--rail .z-tabs__btn.is-active { box-shadow: inset 0 -2px 0 var(--accent); }
    .z-tabs--rail.is-collapsed .z-tabs__btn { min-height: auto; height: auto; width: auto; padding: var(--sp-2) var(--sp-3); }
  }

  .z-tabs__panel.is-active { animation: z-fade var(--dur) var(--ease-decel); }

  /* Segmented control and chips. */
  .z-seg { padding: 0; gap: 0; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; }
  .z-seg__opt { border-radius: 0; font-family: var(--font-body); color: var(--text-secondary); }
  .z-seg__opt + .z-seg__opt { border-left: 1px solid var(--border-strong); }
  .z-seg__opt:hover { background: var(--surface-raise-2); }
  .z-seg__opt.is-active { background: var(--accent); color: var(--accent-contrast); }

  .z-chip { border-radius: var(--r-sm); }
  .z-chip.is-selected { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

  .z-badge {
    border-radius: var(--r-sm);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    font-weight: var(--fw-semi);
  }

  /* Bars are a flat accent fill on a neutral track. */
  .z-bar__track, .bar-track {
    background: var(--surface-raise-2);
    border: 0;
    border-radius: var(--r-sm);
    box-shadow: none;
  }
  .z-bar__fill, .bar-fill {
    background-image: none;
    background-color: var(--tone, var(--accent));
    border-radius: var(--r-sm);
    box-shadow: none;
  }
  .z-bar--xp .z-bar__fill { background: var(--accent); box-shadow: none; }
  .z-bar__fill::after, .bar-fill::after { display: none; }

  /* Tables are a DataGrid: a quiet header, hairline rows, reveal on hover. */
  .z-table-wrap { border-radius: var(--r-sm); }
  .z-table th {
    background: var(--surface-2);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-default);
  }
  .z-table tbody tr:hover td { background: var(--surface-raise-1); }

  .z-stat { border-left-width: 3px; }
  .z-stat__value { font-weight: var(--fw-semilight); }

  .z-list--hoverable .z-list__item { border-radius: var(--r-sm); }
  .z-list--hoverable .z-list__item:hover { background: var(--surface-raise-2); }

  .z-empty__icon { opacity: 0.6; }


  /* ══ chrome ═══════════════════════════════════════════════════════════════════════════════ */
  header {
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .brand { text-shadow: none; font-weight: var(--fw-semilight); }
  .ritual-mark { filter: none; }

  .drawer {
    background: var(--acrylic-tint-deep);
    -webkit-backdrop-filter: var(--acrylic-filter);
    backdrop-filter: var(--acrylic-filter);
    border-right: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-4);
  }
  .drawer-overlay,
  .modal-overlay {
    background: var(--surface-scrim);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* NavigationView items: 40px rows, reveal hover, a 3px accent bar on the active one. */
  .menu-link {
    min-height: 40px;
    border: 0;
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    transition: background var(--dur-fast) var(--ease-decel), color var(--dur-fast) var(--ease-decel);
  }
  .menu-link:hover { transform: none; background: var(--surface-raise-2); color: var(--text-primary); border-color: transparent; }
  .menu-link.active {
    background: var(--surface-raise-2);
    color: var(--text-primary);
    border-color: transparent;
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .menu-category {
    text-shadow: none;
    border-bottom: 0;
    padding-bottom: 0;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--fw-semi);
  }

  /* Dialogs: the ContentDialog. Square, opaque, one hairline, a real shadow. */
  .modal-overlay .glass-card,
  .modal-overlay .card {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 0;
    box-shadow: var(--shadow-4);
  }
  .modal-overlay .glass-card:hover,
  .modal-overlay .card:hover { transform: none; border-color: var(--border-strong); }

  /* Context and dropdown menus. */
  .z-menu {
    border-radius: 0;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-3);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: var(--sp-1) 0;
  }

  /* Toast: the Windows notification. Square, acrylic-dark, a tone strip on the left. */
  .toast {
    bottom: 16px;
    right: 16px;
    width: 364px;
    max-width: calc(100vw - 32px);
    padding: var(--sp-3) var(--sp-4);
    background: var(--acrylic-tint-deep);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--accent);
    border-radius: 0;
    box-shadow: var(--shadow-4);
    -webkit-backdrop-filter: var(--acrylic-filter);
    backdrop-filter: var(--acrylic-filter);
    transform: translateX(24px);
    transition: transform var(--dur-slow) var(--ease-decel), opacity var(--dur-slow) var(--ease-decel);
    font-size: var(--fs-sm);
  }
  .toast.active { transform: none; }
  /* A hidden toast must not sit over the tray catching clicks. */
  .toast:not(.active) { pointer-events: none; visibility: hidden; transition: transform var(--dur-slow) var(--ease-decel), opacity var(--dur-slow) var(--ease-decel), visibility 0s linear var(--dur-slow); }
  /* On the desktop it rises above the taskbar, where Windows puts it. */
  body.is-desktop .toast { bottom: calc(var(--taskbar-h) + 16px); right: 16px; }
  .toast.success { border-left-color: var(--success); box-shadow: var(--shadow-4); }
  .toast.warning { border-left-color: var(--warning); box-shadow: var(--shadow-4); }
  .toast.error {
    border-left-color: var(--close-red);
    background: var(--acrylic-tint-deep);
    box-shadow: var(--shadow-4);
    animation: none;
  }
  .toast-ack-btn { border-radius: var(--r-sm); background: var(--surface-raise-2); }
  .toast-ack-btn:hover { transform: none; background: var(--surface-raise-3); }

  /* Command palette: the Windows search pane. */
  .palette-panel {
    background: var(--acrylic-tint-deep);
    -webkit-backdrop-filter: var(--acrylic-filter);
    backdrop-filter: var(--acrylic-filter);
    border: 1px solid var(--border-strong);
    border-radius: 0;
    box-shadow: var(--shadow-4);
  }
  .palette-item { border-radius: var(--r-sm); }
  .palette-item:hover, .palette-item.active { background: var(--surface-raise-2); }


  /* ══ entrance ═════════════════════════════════════════════════════════════════════════════
     Panels fade up into place. `backwards`, not `both`: a filled end state would outrank a
     normal declaration and hold opacity at 1 on anything hidden by class -- which is exactly
     what once left ten pages with a permanently open, permanently inert modal. The overlay
     exclusion stays for the same reason. */
  .app-container > *:not(.modal-overlay) { animation: z-rise var(--dur-slow) var(--ease-decel) backwards; }
  .app-container > *:nth-child(2) { animation-delay: 30ms; }
  .app-container > *:nth-child(3) { animation-delay: 60ms; }
  .app-container > *:nth-child(n+4) { animation-delay: 90ms; }

  @keyframes z-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }

  .modal-overlay.active .glass-card,
  .modal-overlay.active .card { animation: z-pop var(--dur) var(--ease-decel) backwards; }
  @keyframes z-pop {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: none; }
  }


  /* ══ icon tiles ═══════════════════════════════════════════════════════════════════════════
     Windows 10 app icons are flat glyphs on a solid tile. Emoji supply the glyph; the tile
     takes the module's own hue from the registry. Title bars and the taskbar show the bare
     glyph with no plate at all. */
  .z-launch__icon,
  .z-app__icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-sm);
    font-size: 1.25rem;
    line-height: 1;
    background: var(--hue, var(--accent));
    box-shadow: none;
    text-shadow: none;
    transform: none;
    transition: background var(--dur-fast) var(--ease-decel);
  }
  .z-launch__icon::after { display: none; }
  .z-launcher { perspective: none; }
  .z-launch:hover .z-launch__icon { transform: none; box-shadow: none; }

  .z-win__icon, .z-task__icon {
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    text-shadow: none;
    font-size: 1rem;
  }
  .z-app__icon { width: 1.75rem; height: 1.75rem; font-size: 1rem; }


  /* ══ reduced motion ═══════════════════════════════════════════════════════════════════════ */
  @media (prefers-reduced-motion: reduce) {
    .app-container > *:not(.modal-overlay) { animation: none; }
    .modal-overlay.active .glass-card,
    .modal-overlay.active .card { animation: none; }
    .toast { transition: none; }
  }
}