/* =========================================================================
   Niguro — Portal design layer
   -------------------------------------------------------------------------
   A refresh, not a rebuild. Loaded after every other stylesheet, this file
   restyles the surfaces the whole theme shares — the page, cards, the header,
   the sidebar, tabs, dropdowns, inputs and buttons — into a modern portal
   look: white cards on a cool page, hairline borders, soft elevation that
   lifts under the pointer, and a cleaner header.

   Ground rules this file keeps:
     - No layout changes. Widths, offsets, heights and grids stay exactly as
       the templates set them, so every page behaves as it did. Only surface
       (colour, border, radius, shadow, type) changes here.
     - No hue tokens. --primary/--secondary/--accent/--border… are written by
       Theme Settings → Brand accent (inline in <head>); this file never sets
       them, so changing the brand colour re-tints the redesign too.
     - Opt-out: add `pt-off` to any element to keep its old look.
   ========================================================================= */

/* ---------------------------------------------------------- 1. tokens */

/* `html:root` outranks the inline `:root{}` Theme Settings prints, which is
   what lets the page surface and radius change while the hue tokens it also
   prints are left alone. */
html:root {
    --radius: 12px;

    --pt-radius-sm: 10px;
    --pt-radius: 14px;
    --pt-radius-lg: 18px;
    --pt-line: 220 16% 89%;
    --pt-line-strong: 220 14% 82%;
    --pt-surface: 0 0% 100%;
    --pt-surface-2: 220 20% 97.5%;
    --pt-ink-soft: 220 9% 46%;
    --pt-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --pt-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --pt-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.04), 0 8px 20px -6px rgba(16, 24, 40, 0.12);
    --pt-shadow-lg: 0 4px 8px rgba(16, 24, 40, 0.04), 0 18px 40px -10px rgba(16, 24, 40, 0.18);
    --pt-ring: 0 0 0 3px hsl(var(--primary) / 0.18);
    --pt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The page surface changes in light mode only: dark mode keeps the colours
   Theme Settings derives from the dark accent. */
html:root:not(.dark) {
    --background: 220 22% 95.5%;
}

html.dark:root,
html:root.dark {
    --pt-line: var(--border);
    --pt-line-strong: var(--border);
    --pt-surface: var(--card);
    --pt-surface-2: var(--muted);
    --pt-ink-soft: var(--muted-foreground);
    --pt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --pt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.25);
    --pt-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 24px -8px rgba(0, 0, 0, 0.5);
    --pt-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 20px 44px -12px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------ 2. base */

body {
    text-rendering: optimizeLegibility;
}

:where(h1, h2, h3) {
    letter-spacing: -0.012em;
}

::selection {
    background: hsl(var(--primary) / 0.18);
}

:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
    outline: 2px solid hsl(var(--primary) / 0.65);
    outline-offset: 2px;
}

/* Thin, quiet scrollbars on the page and every scroll panel. */
* {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--pt-line-strong)) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: hsl(var(--pt-line-strong));
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* ----------------------------------------------------------- 3. cards */

/* Every rounded card surface gets the portal treatment: a hairline border and
   the lightest elevation. Elements that already chose a shadow keep theirs. */
:is(.bg-card, .post-card, .story-card):is(.rounded-lg, .rounded-xl, .rounded-2xl, .post-card, .story-card):not(.pt-off):not(#site-header):not([class*="shadow-"]) {
    border: 1px solid hsl(var(--pt-line));
    box-shadow: var(--pt-shadow-sm);
}

:is(.bg-card, .post-card, .story-card).rounded-xl:not(.pt-off),
:is(.post-card, .story-card):not(.pt-off) {
    border-radius: var(--pt-radius);
}

.bg-card.rounded-2xl:not(.pt-off) {
    border-radius: var(--pt-radius-lg);
}

/* Cards you can open lift a little under the pointer. */
@media (hover: hover) {
    :is(a.bg-card, article.post-card, article.story-card, .bg-card.cursor-pointer):is(.rounded-lg, .rounded-xl, .rounded-2xl, .post-card, .story-card):not(.pt-off) {
        transition: box-shadow 0.22s var(--pt-ease), transform 0.22s var(--pt-ease), border-color 0.22s var(--pt-ease);
    }

    :is(a.bg-card, article.post-card, article.story-card, .bg-card.cursor-pointer):is(.rounded-lg, .rounded-xl, .rounded-2xl, .post-card, .story-card):not(.pt-off):hover {
        border-color: hsl(var(--pt-line-strong));
        box-shadow: var(--pt-shadow-md);
        transform: translateY(-1px);
    }
}

/* Card images sit flush with the card's own rounding. */
:is(.post-card, .story-card) img {
    transition: transform 0.5s var(--pt-ease);
}

/* Section titles inside cards and pages: a little more presence. */
:is(.bg-card, main) :is(h2, h3).font-semibold {
    color: hsl(var(--foreground));
}

/* A faint wash of the brand colour at the top of every page, the way modern
   portals give a page its own light. Fixed to the viewport so it never moves
   with content. */
body.bg-background {
    background-image: radial-gradient(1100px 420px at 50% -160px, hsl(var(--primary) / 0.07), transparent 70%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* --------------------------------------------------------- 4. header */

/* The bar on inner pages: a solid surface with a hairline, instead of a
   translucent blur that let busy content bleed through it. The home keeps its
   transparent bar over the hero. */
#site-header.bg-card\/95 {
    background: hsl(var(--pt-surface) / 0.92);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    box-shadow: 0 1px 0 hsl(var(--pt-line)), 0 6px 18px -14px rgba(16, 24, 40, 0.25);
}

/* A thin brand line along the very top — the portal's signature. */
#site-header.bg-card\/95::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / 0.35) 55%, transparent);
    pointer-events: none;
}

/* Header search: a soft pill that turns into a clear field on focus. */
#site-header .hb-search-shell {
    background: hsl(var(--pt-surface-2)) !important;
    box-shadow: inset 0 0 0 1px hsl(var(--pt-line)) !important;
    transition: box-shadow 0.18s var(--pt-ease), background 0.18s var(--pt-ease) !important;
}

#site-header .hb-search-shell:hover {
    box-shadow: inset 0 0 0 1px hsl(var(--pt-line-strong)) !important;
}

#site-header .hb-search-shell:focus-within {
    background: hsl(var(--pt-surface)) !important;
    box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.55), var(--pt-ring), var(--pt-shadow-md) !important;
}

#site-header #search-input::placeholder {
    color: hsl(var(--pt-ink-soft));
}

/* Header icon buttons become round, with a soft hover disc. */
#site-header :is(#sidebar-toggle, #theme-toggle) {
    border-radius: 999px;
}

#site-header :is(#sidebar-toggle, #theme-toggle):hover {
    background: hsl(var(--foreground) / 0.06);
    color: hsl(var(--foreground));
}

/* Search suggestions dropdown */
#search-dropdown {
    border-radius: var(--pt-radius) !important;
    border-color: hsl(var(--pt-line)) !important;
    box-shadow: var(--pt-shadow-lg) !important;
}

/* ---------------------------------------------------- 5. account menu */

.js-user-menu-btn {
    border: 1px solid transparent;
}

.js-user-menu-btn:hover,
.js-user-menu-btn[aria-expanded="true"] {
    background: hsl(var(--foreground) / 0.05);
    border-color: hsl(var(--pt-line));
}

.js-user-menu-dropdown {
    width: 15.5rem !important;
    padding: 6px !important;
    border-radius: var(--pt-radius) !important;
    border-color: hsl(var(--pt-line)) !important;
    box-shadow: var(--pt-shadow-lg) !important;
    transform-origin: top right;
    animation: pt-pop 0.16s var(--pt-ease);
}

.js-user-menu-dropdown > a,
.js-user-menu-dropdown > div > :is(a, button) {
    border-radius: var(--pt-radius-sm) !important;
}

/* The profile header row reads as a small card of its own. */
.js-user-menu-dropdown > a:first-child {
    margin-bottom: 6px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    background: hsl(var(--pt-surface-2));
}

@keyframes pt-pop {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------- 6. left sidebar */

/* On a desktop the sidebar sits on the page colour, and the page you are on is
   a raised white tile — the way portal navigation reads. The phone drawer
   keeps its own white sheet. */
@media (min-width: 1024px) {
    #left-sidebar {
        background: hsl(var(--background));
        box-shadow: inset -1px 0 0 hsl(var(--pt-line));
    }
}

#left-sidebar .sidebar-nav-link {
    border-radius: var(--pt-radius-sm);
    transition: background 0.16s var(--pt-ease), color 0.16s var(--pt-ease), box-shadow 0.16s var(--pt-ease);
}

#left-sidebar .sidebar-nav-link svg {
    color: hsl(var(--pt-ink-soft));
    transition: color 0.16s var(--pt-ease);
}

#left-sidebar .sidebar-nav-link:hover {
    background: hsl(var(--foreground) / 0.05);
}

#left-sidebar .sidebar-nav-link.bg-sidebar-accent {
    background: hsl(var(--pt-surface));
    color: hsl(var(--foreground));
    font-weight: 600;
    box-shadow: var(--pt-shadow-sm), inset 0 0 0 1px hsl(var(--pt-line));
}

#left-sidebar .sidebar-nav-link.bg-sidebar-accent svg {
    color: hsl(var(--primary));
}

#left-sidebar h3.uppercase {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: hsl(var(--pt-ink-soft));
}

#left-sidebar .border-sidebar-border {
    border-color: hsl(var(--pt-line));
}

/* ------------------------------------------------------- 7. controls */

/* Primary buttons: a touch of depth and weight. */
:is(button, a).bg-primary:not(.pt-off) {
    font-weight: 600;
    box-shadow: 0 1px 2px hsl(var(--primary) / 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: filter 0.16s var(--pt-ease), box-shadow 0.16s var(--pt-ease), transform 0.12s var(--pt-ease);
}

:is(button, a).bg-primary:not(.pt-off):hover {
    filter: brightness(1.05);
    box-shadow: 0 4px 12px -2px hsl(var(--primary) / 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

:is(button, a).bg-primary:not(.pt-off):active {
    transform: translateY(1px);
}

/* Text fields */
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select).border:not(.pt-off) {
    border-color: hsl(var(--pt-line));
    transition: border-color 0.16s var(--pt-ease), box-shadow 0.16s var(--pt-ease);
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select).border:not(.pt-off):focus {
    border-color: hsl(var(--primary) / 0.55);
    box-shadow: var(--pt-ring);
    outline: none;
}

/* Tabs (communities, notifications, profiles): the active tab gets a heavier
   rule and the row a hairline base. */
.tab-trigger {
    transition: color 0.16s var(--pt-ease), border-color 0.16s var(--pt-ease);
}

.tab-trigger.border-primary {
    font-weight: 600;
}

/* Tab rows become a segmented card: the row is a white pill tray, each tab a
   pill, and the active one (theme.js marks it with .border-primary) a tinted
   pill in the brand colour. Same buttons, same script, same order. */
:is(div, nav):has(> .tab-trigger):not(.pt-off) {
    gap: 4px;
    padding: 5px !important;
    border: 1px solid hsl(var(--pt-line)) !important;
    border-radius: 999px !important;
    background: hsl(var(--pt-surface)) !important;
    box-shadow: var(--pt-shadow-xs);
    overflow-x: auto;
    scrollbar-width: none;
}

:is(div, nav):has(> .tab-trigger):not(.pt-off)::-webkit-scrollbar {
    display: none;
}

:is(div, nav):has(> .tab-trigger):not(.pt-off) > .tab-trigger {
    flex-shrink: 0;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}

:is(div, nav):has(> .tab-trigger):not(.pt-off) > .tab-trigger:hover {
    background: hsl(var(--foreground) / 0.05);
    color: hsl(var(--foreground));
}

:is(div, nav):has(> .tab-trigger):not(.pt-off) > .tab-trigger.border-primary {
    background: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary)) !important;
    box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.18);
}

/* The notifications card wraps its tab row in a bordered strip of its own;
   inside a card the tray sits flush instead of as a second card. */
.bg-card :is(div, nav):has(> .tab-trigger):not(.pt-off) {
    margin: 10px;
    background: hsl(var(--pt-surface-2)) !important;
    box-shadow: none;
}

/* Chips and small pills */
.rounded-full.bg-muted:not(.pt-off),
.rounded-full.bg-secondary:not(.pt-off) {
    box-shadow: inset 0 0 0 1px hsl(var(--pt-line));
}

/* Modals and popovers that use the shared classes */
:is([role="dialog"], .modal-content, .niriv-modal) :is(.bg-card, .bg-background).rounded-xl:not(.pt-off) {
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-lg);
}

/* --------------------------------------------------- 8. notifications */

#notif-list .notification-item {
    transition: background 0.16s var(--pt-ease);
}

#notif-list .notification-item:hover {
    background: hsl(var(--foreground) / 0.03);
}

#notif-list .notification-item.bg-accent\/30 {
    background: hsl(var(--primary) / 0.05);
    box-shadow: inset 3px 0 0 hsl(var(--primary));
}

#notif-list .notification-type-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: hsl(var(--pt-surface-2));
    flex-shrink: 0;
}

/* ------------------------------------------------- 9. mobile bottom bar */

.nn-mobile-pill .nn-mobile-pill-inner {
    box-shadow: var(--pt-shadow-lg), inset 0 0 0 1px hsl(var(--pt-line));
}

/* ------------------------------------------------------------ 10. motion */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ------------------------------------------------ 11. Apps & Services */

/* Each service is a tile: its own white card, an icon chip in the brand tint,
   and a lift under the pointer. Same grid, same search, same script. */
#all-app .ax-grid {
    gap: 12px !important;
}

#all-app .ax-item {
    align-items: center;
    padding: 14px 16px !important;
    border-radius: var(--pt-radius) !important;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--pt-line));
    box-shadow: var(--pt-shadow-sm);
    transition: box-shadow 0.22s var(--pt-ease), transform 0.22s var(--pt-ease), border-color 0.22s var(--pt-ease);
}

#all-app .ax-item:hover {
    background: hsl(var(--card)) !important;
    border-color: hsl(var(--primary) / 0.35);
    box-shadow: var(--pt-shadow-md);
    transform: translateY(-2px);
}

#all-app .ax-ico {
    background: hsl(var(--primary) / 0.09) !important;
    box-shadow: none !important;
}

#all-app .ax-item:hover .ax-ico {
    background: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground));
}

/* Popular services: a touch more presence than the A–Z list. */
#all-app .ax-section-popular .ax-item {
    padding: 18px !important;
    border-radius: var(--pt-radius-lg) !important;
}

#all-app .ax-search,
#all-app .ax-input {
    border-radius: 999px;
}

#all-app .ax-search:focus-within {
    box-shadow: var(--pt-ring), var(--pt-shadow-sm);
}

/* ------------------------------------------------------ 12. home board */

/* The quick-services row: each service a small white tile with a brand-tinted
   icon chip. Sizing (the flex basis that fits 4 or 7 per row) is untouched. */
body .nfeed-svc {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--pt-line));
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-xs);
    padding: 12px 6px 10px;
    transition: box-shadow 0.22s var(--pt-ease), transform 0.22s var(--pt-ease), border-color 0.22s var(--pt-ease);
}

body .nfeed-svc:hover {
    background: hsl(var(--card));
    border-color: hsl(var(--primary) / 0.35);
    box-shadow: var(--pt-shadow-md);
    transform: translateY(-2px);
}

body .nfeed-svc .nfeed-svc-icon {
    border: 0;
    background: hsl(var(--primary) / 0.09);
}

body .nfeed-svc:hover .nfeed-svc-icon {
    transform: none;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/* Category pills: round, with the active one in the brand tint. */
body .nfeed-top-pill {
    border-radius: 999px;
}

body .nfeed-top-pill-active {
    background: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.18);
}