/* ==========================================================================
   NOI skin for Chevereto (Peafowl)
   Mirrors noi.enzenada.cloud: ink background, teal/lime accents,
   Montserrat display, DM Sans body, Space Mono labels, square corners.
   Loaded after the palette styles, so :root:root:root wins every palette.
   ========================================================================== */

:root:root:root {
    color-scheme: dark;

    /* noi tokens */
    --ink: #050a0e; --panel: #0a1216; --panel2: #0e181d; --line: #16262c; --line2: #101c21;
    --text: #dbe7e4; --muted: #7d9490; --sub: #a7bcb7;
    --teal: #2dd4bf; --lime: #a3e635; --amber: #f59e0b; --red: #f87171; --violet: #a78bfa;
    --display: 'Montserrat', system-ui, sans-serif;
    --body: 'DM Sans', system-ui, sans-serif;
    --mono: 'Space Mono', ui-monospace, Consolas, monospace;

    /* Peafowl variables mapped onto noi tokens */
    --colorBlue: var(--teal);
    --colorBlueHover: #5eead4;
    --colorGreen: var(--lime);
    --colorRed: var(--red);
    --colorYellow: var(--amber);
    --colorPurple: var(--violet);
    --colorAccent: var(--teal);
    --colorAccentStrong: #5eead4;
    --borderRadius: 0;

    --alertAccent: var(--teal);
    --alertBackground: var(--panel2);
    --alertText: var(--text);
    --backgroundDarkAlpha: rgb(5 10 14 / 88%);
    --backgroundLightAlpha: rgb(10 18 22 / 92%);
    --bodyBackground: var(--ink);
    --bodyEmpty: var(--panel);
    --bodySeparator: var(--line);
    --bodyText: var(--text);
    --bodyTextDisabled: #33474d;
    --bodyTextSubtle: var(--muted);
    --buttonAccentBackground: var(--teal);
    --buttonAccentHoverBackground: #5eead4;
    --buttonAccentText: #04191a;
    --buttonAccentHoverText: #04191a;
    --buttonDefaultBackground: var(--panel);
    --buttonDefaultBorder: var(--line);
    --buttonDefaultHoverBackground: var(--panel2);
    --buttonDefaultHoverBorder: rgba(45, 212, 191, .5);
    --buttonDefaultHoverText: var(--teal);
    --buttonDefaultText: var(--sub);
    --inputBackground: var(--panel);
    --inputPlaceholderText: #4f6662;
    --inputText: var(--text);
    --linkText: var(--teal);
    --menuBackground: rgba(10, 18, 22, .97);
    --menuBorder: var(--line);
    --menuItemHoverBackground: rgba(45, 212, 191, .08);
    --menuItemHoverText: var(--teal);
    --menuItemText: var(--sub);
    --menuSeparator: var(--line2);
    --menuText: var(--text);
    --modalBackground: var(--panel);
    --modalText: var(--text);
    --topBarBackground: rgba(5, 10, 14, .9);
    --topSubBarBackground: var(--ink);
    --topBarText: var(--text);
    --viewerBackground: #03070a;
    --listItemText: var(--text);
}

/* ---- base ---- */
html, html body, .font-0, html.font-0 body {
    font-family: var(--body);
    -webkit-font-smoothing: antialiased;
}
html { background: var(--ink); }
body { background: transparent; color: var(--text); }
::selection { background: rgba(45, 212, 191, .3); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #1b2f36; border-radius: 6px; border: 3px solid var(--ink); }
h1, h2, h3, h4, h5, h6 { font-family: var(--display); letter-spacing: -.012em; }
a { color: var(--teal); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ambient wash + vertical rule grid, same as noi */
.noi-wash, .noi-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.noi-wash {
    background:
        radial-gradient(700px 380px at 8% -8%, rgba(45, 212, 191, .10), transparent 65%),
        radial-gradient(620px 420px at 96% 4%, rgba(163, 230, 53, .06), transparent 62%);
}
.noi-grid {
    background-image: linear-gradient(to right, rgba(125, 148, 144, .05) 1px, transparent 1px);
    background-size: 96px 100%;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 70%);
            mask-image: linear-gradient(to bottom, black, transparent 70%);
}

/* ---- top bar ---- */
.top-bar--main {
    background: var(--topBarBackground);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
}
body.landing .top-bar--main:not(.scrolled) { background: rgba(5, 10, 14, .55); }
.top-btn-text, .top-btn-create-account {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .18s;
}
.top-btn-el:hover .top-btn-text, .pop-btn:hover .top-btn-text, li.current .top-btn-text,
.top-btn-text:hover { color: var(--teal); }
.top-btn-text .icon { color: inherit; }

/* brand: ◇ NOI / IMG (logo_type = text) */
#logo a {
    display: inline-flex; align-items: center; gap: .55rem;
    text-decoration: none; color: var(--text);
    font-family: var(--mono); font-size: 0; font-weight: 700;
}
#logo a::before {
    content: ''; width: .8rem; height: .8rem; flex-shrink: 0;
    border: 2px solid var(--teal); transform: rotate(45deg);
}
#logo a::after {
    content: 'NOI / IMG';
    font-size: .72rem; letter-spacing: .22em; color: var(--text);
}
#logo a:hover::after { color: var(--teal); }

/* injected "Dossier" link in the top bar */
#top-bar-noi .top-btn-text { color: var(--teal); }
#top-bar-noi a { text-decoration: none; }

/* scroll progress, as on noi */
#noi-prog { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 1000; background: var(--teal); pointer-events: none; }

/* ---- pop menus & modals ---- */
.pop-box, .pop-box-inner, .fullscreen, .modal-box, #fullscreen-modal-box {
    border-radius: 0 !important;
}
.pop-box {
    background: var(--menuBackground);
    border: 1px solid var(--line);
    box-shadow: 0 22px 45px -18px rgba(0, 0, 0, .95);
}
.pop-box-label {
    font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--muted);
}
.pop-box-menu a { font-size: .9rem; }
.arrow-box::after, .arrow-box::before { display: none; }
#fullscreen-modal-box, .modal-box {
    background: var(--panel); border: 1px solid var(--line);
}
.modal-box-title {
    font-family: var(--display); font-weight: 800; letter-spacing: -.012em;
}

/* ---- buttons ---- */
.btn {
    border-radius: 0;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.btn.default { border: 1px solid var(--line); }
.btn.default:hover { border-color: rgba(45, 212, 191, .5); }
.btn.accent:not(.outline):hover { box-shadow: 0 0 34px -12px rgba(45, 212, 191, .7); }
.btn.btn-capsule, .btn-capsule { border-radius: 0; }
.btn-big { font-size: .78rem; }

/* ---- inputs ---- */
.text-input, input[type=text], input[type=email], input[type=password], input[type=search],
input[type=url], input[type=number], textarea, select {
    border-radius: 0;
    border: 1px solid var(--line);
    background: var(--inputBackground);
    color: var(--inputText);
    font-family: var(--body);
}
.text-input:focus, input:focus, textarea:focus, select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 1px rgba(45, 212, 191, .25);
    outline: none;
}
.input-label label, label {
    font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.input-search { border-radius: 0; }

/* ---- homepage cover ---- */
#home-cover { background-color: var(--ink); }
.home-cover-img { filter: saturate(.55) contrast(1.06); }
#home-cover-slideshow::after {
    content: ""; position: absolute; display: block; height: auto; inset: 0; z-index: 2;
    background:
        radial-gradient(ellipse 60% 55% at 50% 48%, rgba(5, 10, 14, .62), rgba(5, 10, 14, .86) 75%),
        linear-gradient(180deg, rgba(5, 10, 14, .55), rgba(5, 10, 14, .2) 35%, rgba(5, 10, 14, .95));
}
#noi-cover-vid {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover;
    filter: saturate(.55) contrast(1.06); opacity: 0; transition: opacity 1.2s ease;
}
#noi-cover-vid.on { opacity: 1; }
#home-cover-content { z-index: 3; }
#home-cover-content h1 {
    font-family: var(--display);
    font-weight: 900;
    letter-spacing: -.022em;
    font-size: clamp(2.5rem, 6.6vw, 4.6rem);
    line-height: 1.04;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .6);
}
#home-cover-content h1 .noi-accent { color: var(--teal); }
#home-cover-content p {
    font-family: var(--body);
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--sub);
    max-width: 60ch;
    margin-left: auto; margin-right: auto;
}
#home-cover-content p a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(45, 212, 191, .6); text-underline-offset: 3px; }
#home-cover-content p a:hover { color: var(--teal); }
.noi-kicker {
    display: inline-flex; align-items: center; gap: .55rem;
    border: 1px solid rgba(45, 212, 191, .35); background: rgba(45, 212, 191, .07);
    padding: .32rem .8rem; font-family: var(--mono); font-size: .68rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--teal);
}
.noi-kicker::before { content: ''; width: .4rem; height: .4rem; background: var(--teal); border-radius: 50%; }
.home-buttons { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.home-buttons a { font-size: .74rem; letter-spacing: .12em; min-height: 0; padding: .95rem 1.4rem; }
.home-buttons a i { margin-right: .5rem; }
.home-buttons a.noi-ghost {
    background: rgba(5, 10, 14, .55); color: var(--text);
    border: 1px solid rgba(45, 212, 191, .45);
}
.home-buttons a.noi-ghost:hover { color: var(--teal); border-color: var(--teal); background: rgba(45, 212, 191, .08); }

/* ---- page headers, tabs ---- */
.header {
    border-bottom: 1px solid var(--line2);
}
.header h1, .header .header-title {
    font-family: var(--display); font-weight: 800;
}
.content-tabs a, .tabs a, .header-tabs a {
    font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
}
.content-tabs .current a, .content-tabs li.current a, .tabs .current a { color: var(--teal); }
.content-tabs li.current, .content-tabs .current { box-shadow: inset 0 -2px 0 var(--teal); }

/* ---- listings: cards with noi hover lift ---- */
.list-item .list-item-image {
    border: 1px solid var(--line);
    border-radius: 0;
    background: #070f13;
    transition: border-color .28s, box-shadow .28s;
}
.list-item:hover .list-item-image {
    border-color: rgba(45, 212, 191, .5);
    box-shadow: 0 22px 45px -18px rgba(0, 0, 0, .95), 0 0 34px -12px rgba(45, 212, 191, .45);
}
.list-item-desc-title, .list-item-desc-title-link { font-family: var(--display); font-weight: 700; }
.list-item-from { font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; }
.list-item .list-item-image-tools { border-radius: 0; }
.content-empty, .empty-content { color: var(--muted); font-family: var(--mono); }

/* ---- image / album pages ---- */
.image-viewer, #image-viewer { background: var(--viewerBackground); border-bottom: 1px solid var(--line); }
.description-meta, .exif-meta, .panel-description, .panel-share-input {
    font-family: var(--body); color: var(--sub);
}
.exif-meta, .panel-share-input, input.r3, textarea.r3 { font-family: var(--mono); font-size: .76rem; }
.tabbed-content, .panel-share { border-color: var(--line); }
.tag.btn, .tag { font-family: var(--mono); }

/* ---- alerts / notices ---- */
#growl, .growl { border-radius: 0; border-left: 2px solid var(--teal); font-family: var(--body); }

/* ---- footer (replaces "powered by" strip) ---- */
#home-cover { position: relative; }
.noi-foot {
    position: relative;
    border-top: 1px solid var(--line);
    padding: 2.6rem 0 3rem;
    margin-top: 3rem;
    background: var(--ink);
}
body.landing .noi-foot { margin-top: 0; }
.noi-foot-in {
    max-width: 74rem; margin: 0 auto; padding: 0 1.25rem;
    display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; justify-content: space-between; align-items: flex-end;
}
.noi-foot .eyebrow {
    font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--teal);
}
.noi-foot h2 { margin: .6rem 0 0; font-size: 1.35rem; font-weight: 800; color: var(--text); }
.noi-foot p { margin: .6rem 0 0; max-width: 56ch; color: var(--sub); font-size: .9rem; line-height: 1.6; }
.noi-foot p a { color: var(--teal); }
.noi-foot .stack { display: flex; flex-wrap: wrap; gap: .45rem; }
.noi-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--line); background: var(--panel);
    padding: .38rem .7rem; font-family: var(--mono); font-size: .68rem; color: var(--sub);
    text-decoration: none; transition: border-color .2s, color .2s;
}
.noi-chip:hover { border-color: rgba(45, 212, 191, .5); color: var(--teal); }
.noi-chip.on { color: var(--teal); border-color: rgba(45, 212, 191, .35); background: rgba(45, 212, 191, .07); }
.noi-foot .fine {
    flex-basis: 100%; margin-top: .6rem; padding-top: 1.2rem; border-top: 1px solid var(--line2);
    font-family: var(--mono); font-size: .66rem; color: var(--muted); letter-spacing: .04em;
}
.noi-foot .fine a { color: var(--muted); }
.noi-foot .fine a:hover { color: var(--teal); }

@media (max-width: 620px) {
    #home-cover-content p { font-size: .98rem; }
    .noi-foot-in { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    #noi-cover-vid { display: none; }
    .list-item .list-item-image, .btn { transition: none; }
}