/* =====================================================
   system7.css — shared chrome for mehulnair.com
   black on white, 1px borders, Lora + Silkscreen.
   ===================================================== */

:root {
    --ink:   #000000;
    --paper: #ffffff;
    --slot:  #f4f4f4;
    /* watercolor — shades of blue */
    --sel-light: #cfe3f5;
    --sel-mid:   #a9cbe8;
    --sel-deep:  #6f9fc8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Lora', Georgia, serif;
    font-size: 15px;
    line-height: 1.75;
}

a { color: var(--ink); }

/* real selection is transparent; a watercolor overlay paints it instead */
::selection      { background: transparent; color: var(--ink); }
::-moz-selection { background: transparent; color: var(--ink); }

.wc-selection-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.wc-sel-blob {
    position: absolute;
    background:
      radial-gradient(ellipse 55% 70% at 30% 45%, var(--sel-light), transparent 72%),
      radial-gradient(ellipse 50% 65% at 75% 55%, var(--sel-mid), transparent 70%),
      linear-gradient(100deg, rgba(207, 227, 245, 0.55), rgba(169, 203, 232, 0.6));
    filter: url(#s7-rough) blur(0.5px);
    border-radius: 6px 10px 4px 12px / 10px 4px 12px 6px;
    mix-blend-mode: multiply;
    opacity: 0.85;
}
.wc-sel-blob::after {
    content: '';
    position: absolute;
    inset: 45% -4px -4px 8%;
    background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(111, 159, 200, 0.4), transparent 70%);
    filter: url(#s7-rough) blur(0.7px);
    opacity: 0.55;
    border-radius: inherit;
}

/* ---------- menu bar ---------- */
.menubar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    border-bottom: 1px solid var(--ink);
    font-family: 'Silkscreen', monospace;
    font-size: 11px;
    text-transform: lowercase;
    position: relative;
    z-index: 1;
}
.menubar a {
    display: inline-block;
    padding: 3px 9px;
    text-decoration: none;
    cursor: pointer;
}
.menubar a:hover { background: var(--ink); color: var(--paper); }
.menubar a:focus-visible {
    outline: 1px solid var(--ink);
    outline-offset: -1px;
}
.menu-glyph { padding: 3px 9px; }

/* ---------- window ---------- */
.window {
    max-width: 735px;
    margin: 28px auto 48px;
    border: 1px solid var(--ink);
    position: relative;
    z-index: 1;
}

.titlebar {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--ink);
    background: repeating-linear-gradient(to bottom, #000 0 1px, #fff 1px 3px);
}
.titlebar .title-chip {
    font-family: 'Silkscreen', monospace;
    font-size: 11px;
    text-transform: lowercase;
    background: var(--paper);
    padding: 0 8px;
    line-height: 1;
}
.closebox, .zoombox {
    position: absolute;
    top: 4px;
    width: 11px;
    height: 11px;
    border: 1px solid var(--ink);
    background: var(--paper);
}
.closebox { left: 8px; }
.zoombox  { right: 8px; }
.zoombox::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
}

.window-body {
    display: grid;
    grid-template-columns: 1fr 15px;
}

.content { padding: 26px; min-width: 0; }

/* ---------- fake scrollbar ---------- */
.scrollcol {
    border-left: 1px solid var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.scrollcol .cap {
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scrollcol .cap.top    { border-bottom: 1px solid var(--ink); }
.scrollcol .cap.bottom { border-top: 1px solid var(--ink); }

/* ---------- status bar ---------- */
.statusbar {
    border-top: 1px solid var(--ink);
    padding: 4px 10px;
    font-family: 'Silkscreen', monospace;
    font-size: 11px;
    text-transform: lowercase;
}

/* ---------- sections ---------- */
section + section { margin-top: 26px; }

h2 {
    font-family: 'Silkscreen', monospace;
    font-size: 11px;
    font-weight: 400;
    text-transform: lowercase;
    margin-bottom: 10px;
}

/* ---------- watercolor highlight ---------- */
.wash {
    background: linear-gradient(100deg, var(--sel-light) 0%, var(--sel-mid) 55%, var(--sel-light) 100%);
    mix-blend-mode: multiply;
    padding: 1px 3px;
    border-radius: 2px 6px 3px 5px;
}

/* ---------- focus ---------- */
:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
    .window { margin: 16px 10px 32px; }
    .window-body { grid-template-columns: 1fr; }
    .scrollcol { display: none; }
    .content { padding: 16px; }
}