/* ============================================================================
   NotAHit — Windows 95 chrome
   ----------------------------------------------------------------------------
   Presentation only. Nothing here decides what the club does.

   The whole look rests on one trick: Windows 95 draws every 3D edge with FOUR
   colours, not two. Outer ring is white (top/left) and black (bottom/right);
   inner ring is #dfdfdf and #808080. A two-colour bevel is the single most
   common reason a "Win95 theme" reads as generic-retro rather than as Win95, so
   both rings are here and are worth keeping.
   ========================================================================== */

:root {
    --face:        #c0c0c0;   /* the grey everything is made of */
    --face-light:  #dfdfdf;
    --white:       #ffffff;
    --shadow:      #808080;
    --dark:        #000000;

    --title:       #000080;   /* the navy title bar */
    --title-2:     #1084d0;   /* gradient end, Win95 Plus! style */
    --title-text:  #ffffff;
    --title-idle:  #808080;

    --desktop:     #008080;   /* the teal */
    --text:        #000000;
    --disabled:    #808080;
    --highlight:   #000080;
    --highlight-t: #ffffff;

    --sel-blue:    #000080;

    /* MS Sans Serif is the real Explorer face. It exists on Windows; the
       fallbacks are chosen to keep the same tight metrics elsewhere rather
       than to look identical, which is not achievable without shipping a
       font. Rendering is kept crisp because Win95 UI was never anti-aliased. */
    --ui-font: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
}

* { box-sizing: border-box; }

html { scrollbar-color: var(--face) var(--face-light); }

body {
    margin: 0;
    padding: 0;
    background: var(--desktop);
    color: var(--text);
    font-family: var(--ui-font);
    font-size: 12px;
    /* Win95 never anti-aliased its UI text. */
    -webkit-font-smoothing: none;
    text-rendering: optimizeSpeed;
}

/* --- the two bevels ------------------------------------------------------ */

.raised {
    border: 2px solid;
    border-color: var(--white) var(--dark) var(--dark) var(--white);
    box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--shadow);
    background: var(--face);
}

.sunken {
    border: 2px solid;
    border-color: var(--shadow) var(--white) var(--white) var(--shadow);
    box-shadow: inset 1px 1px 0 var(--dark), inset -1px -1px 0 var(--face-light);
    background: var(--white);
}

/* A thin sunken groove — used for separators and field wells. */
.groove {
    border: 1px solid;
    border-color: var(--shadow) var(--white) var(--white) var(--shadow);
}

/* --- window -------------------------------------------------------------- */

.window {
    background: var(--face);
    border: 2px solid;
    border-color: var(--white) var(--dark) var(--dark) var(--white);
    box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--shadow);
    padding: 3px;
}

.title-bar {
    background: linear-gradient(90deg, var(--title), var(--title-2));
    color: var(--title-text);
    padding: 3px 3px 3px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    letter-spacing: 0.2px;
    user-select: none;
}

.title-bar .title-text {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The three little buttons. Decorative here — this is a web page, and a close
   button that does not close anything is worse than no close button, so they
   are marked aria-hidden and are not focusable. */
.title-buttons { display: flex; gap: 2px; flex: 0 0 auto; }

.title-btn {
    width: 16px;
    height: 14px;
    background: var(--face);
    border: 1px solid;
    border-color: var(--white) var(--dark) var(--dark) var(--white);
    box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--shadow);
    display: grid;
    place-items: center;
    font-size: 9px;
    line-height: 1;
    color: var(--dark);
    font-weight: bold;
}

.window-body { padding: 8px; }

/* --- the banner ---------------------------------------------------------- */

.banner {
    max-width: 1000px;
    margin: 16px auto 0;
}

.banner .window-body {
    /* The white well an Explorer file list sits in. */
    background: var(--white);
    border: 2px solid;
    border-color: var(--shadow) var(--white) var(--white) var(--shadow);
    box-shadow: inset 1px 1px 0 var(--dark), inset -1px -1px 0 var(--face-light);
    padding: 28px 16px;
    text-align: center;
}

.banner h1 {
    margin: 0;
    font-family: var(--ui-font);
    font-size: 44px;
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--title);
    line-height: 1.1;
}

.banner .tagline {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--shadow);
}

/* --- the nav bar --------------------------------------------------------- */

/* Sticky, per the brief: the page scrolls, and the nav stops when it reaches
   the top and stays there. `position: sticky` does this without any scroll
   listener — a JS implementation would jitter on every frame and break the
   moment the banner height changed. */
.nav-wrap {
    position: sticky;
    top: 0;
    z-index: 50;
    max-width: 1000px;
    margin: 0 auto;
    background: var(--face);
    border: 2px solid;
    border-color: var(--white) var(--dark) var(--dark) var(--white);
    box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--shadow);
    border-top-width: 0;
}

.nav {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 4px 6px 0;
    /* Tabs sit ON the content edge below. */
    border-bottom: 1px solid var(--shadow);
    min-height: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav-right { margin-left: auto; display: flex; gap: 2px; align-items: flex-end; }

/* Win95 tab: raised, with the bottom edge open so the active one merges into
   the panel below it. That merge is what makes it read as a tab rather than a
   button, and it is why the active tab is 2px taller and has no bottom border. */
.tab {
    appearance: none;
    font: inherit;
    color: var(--text);
    background: var(--face);
    padding: 5px 12px 4px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;

    border: 2px solid;
    border-color: var(--white) var(--dark) transparent var(--white);
    border-radius: 3px 3px 0 0;
    box-shadow: inset 1px 1px 0 var(--face-light), inset -1px 0 0 var(--shadow);
    margin-bottom: 0;
    top: 2px;
}

.tab:hover { background: #cdcdcd; }

.tab.is-active {
    background: var(--face);
    top: 0;
    padding-bottom: 7px;
    margin-bottom: -1px;
    z-index: 2;
    font-weight: bold;
}

.tab:focus-visible {
    outline: 1px dotted var(--dark);
    outline-offset: -4px;
}

/* --- buttons ------------------------------------------------------------- */

.btn {
    appearance: none;
    font: inherit;
    font-family: var(--ui-font);
    background: var(--face);
    color: var(--text);
    padding: 4px 14px;
    min-width: 75px;              /* Win95 standard button width */
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;

    border: 2px solid;
    border-color: var(--white) var(--dark) var(--dark) var(--white);
    box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--shadow);
}

/* Pressed state inverts both rings — the edge that was lit goes dark. */
.btn:active {
    border-color: var(--dark) var(--white) var(--white) var(--dark);
    box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--face-light);
    padding: 5px 13px 3px 15px;   /* the 1px content shift on press */
}

.btn:focus-visible { outline: 1px dotted var(--dark); outline-offset: -5px; }

.btn[disabled] { color: var(--disabled); text-shadow: 1px 1px 0 var(--white); cursor: default; }

.btn-link {
    background: none;
    border: 0;
    box-shadow: none;
    min-width: 0;
    padding: 2px;
    color: var(--title);
    text-decoration: underline;
    cursor: pointer;
}

/* --- fields -------------------------------------------------------------- */

.field { margin-bottom: 10px; }

.field label {
    display: block;
    margin-bottom: 3px;
}

.input {
    font: inherit;
    font-family: var(--ui-font);
    width: 100%;
    padding: 3px 4px;
    background: var(--white);
    color: var(--text);
    border: 2px solid;
    border-color: var(--shadow) var(--white) var(--white) var(--shadow);
    box-shadow: inset 1px 1px 0 var(--dark), inset -1px -1px 0 var(--face-light);
}

.input:focus { outline: none; }

fieldset {
    border: 1px solid;
    border-color: var(--shadow) var(--white) var(--white) var(--shadow);
    padding: 10px 12px 12px;
    margin: 0 0 12px;
}

legend { padding: 0 4px; }

/* --- panels and layout --------------------------------------------------- */

.panel-wrap {
    max-width: 1000px;
    margin: 0 auto 24px;
    background: var(--face);
    border: 2px solid;
    border-color: var(--white) var(--dark) var(--dark) var(--white);
    border-top: 0;
    box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--shadow);
    padding: 14px;
}

.columns {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 14px;
    align-items: start;
}

/* Main content first, narrow sidebar second — for pages where the LEFT column
   is the thing you came to look at. The default above is the other way round
   (a fixed 320px first column), which is right for a login box beside prose and
   badly wrong for a month grid: the calendar was being squeezed into 320px and
   scrolling sideways while "Subscribe" took the rest of the page.

   minmax(0, 1fr), not 1fr: a bare 1fr refuses to shrink below the intrinsic
   width of its contents, so a wide table pushes the whole grid out and brings
   back the horizontal scrollbar this exists to remove. */
.columns.main-left {
    grid-template-columns: minmax(0, 1fr) 240px;
}

.stack > * + * { margin-top: 12px; }

/* --- status bar ---------------------------------------------------------- */

.status-bar {
    display: flex;
    gap: 3px;
    margin-top: 12px;
}

.status-cell {
    border: 1px solid;
    border-color: var(--shadow) var(--white) var(--white) var(--shadow);
    padding: 3px 6px;
    flex: 0 1 auto;
}
.status-cell.grow { flex: 1 1 auto; }

/* --- messages ------------------------------------------------------------ */

.alert {
    border: 2px solid;
    border-color: var(--shadow) var(--white) var(--white) var(--shadow);
    box-shadow: inset 1px 1px 0 var(--dark), inset -1px -1px 0 var(--face-light);
    background: var(--white);
    padding: 8px 10px;
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.alert .icon { flex: 0 0 auto; font-size: 15px; line-height: 1.1; }

/* --- book list ----------------------------------------------------------- */

.book {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: var(--white);
    border: 1px solid;
    border-color: var(--shadow) var(--white) var(--white) var(--shadow);
}

.book + .book { margin-top: 8px; }

.book h3 { margin: 0 0 2px; font-size: 12px; }
.book .byline { margin: 0 0 6px; color: var(--shadow); }
.book p.review { margin: 0; line-height: 1.5; }

/* --- the Win95 scrollbar -------------------------------------------------- */

/* The track is a 50% dither of white on grey. Win95 did this with a 2x2
   checkerboard because it had 16 colours and no alpha; reproducing the
   checkerboard rather than using a flat mid-grey is most of why this reads as
   the real thing. hard-stop gradients keep the checks crisp at any zoom. */
::-webkit-scrollbar { width: 16px; height: 16px; }

::-webkit-scrollbar-track {
    background-color: var(--face);
    background-image:
        linear-gradient(45deg, var(--white) 25%, transparent 25%, transparent 75%, var(--white) 75%),
        linear-gradient(45deg, var(--white) 25%, transparent 25%, transparent 75%, var(--white) 75%);
    background-size: 2px 2px;
    background-position: 0 0, 1px 1px;
}

::-webkit-scrollbar-thumb {
    background: var(--face);
    border: 2px solid;
    border-color: var(--white) var(--dark) var(--dark) var(--white);
    box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--shadow);
}

::-webkit-scrollbar-corner { background: var(--face); }

/* Firefox has no per-part scrollbar styling — only these two properties. It
   gets a plain grey scrollbar, deliberately, rather than a JS-driven fake one
   that would break keyboard scrolling and the OS accessibility settings. */
@supports (scrollbar-width: auto) {
    html { scrollbar-width: auto; scrollbar-color: var(--face) var(--face-light); }
}

/* --- mobile -------------------------------------------------------------- */

/* The brief asks for a mobile version as well as desktop. The chrome is kept —
   the bevels and the title bar are the whole point and they survive being
   narrow — but the two-column layout collapses and the banner stops trying to
   be 44px tall on a 375px screen. */
@media (max-width: 900px) {
    .columns { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .banner { margin-top: 8px; }
    .banner .window-body { padding: 18px 10px; }
    .banner h1 { font-size: 30px; }

    .nav { padding: 4px 4px 0; }
    .tab { padding: 6px 10px 5px; }
    .nav-right { margin-left: 0; }

    /* The tab strip scrolls sideways rather than wrapping. A wrapped strip
       changes height, and a sticky element that changes height as you scroll
       jumps under your finger. */
    .nav { flex-wrap: nowrap; }

    .panel-wrap { padding: 10px; }
    .btn { min-width: 0; padding: 7px 14px; }  /* a real touch target */
    .input { padding: 7px 6px; font-size: 16px; }  /* 16px stops iOS zooming on focus */
}

/* Respect the OS setting. Nothing here animates much, but the sticky nav plus
   smooth scrolling is exactly the combination people turn this off for. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}