/*
 Random20 Internet discovery tool
 Copyright (C) 2025 ops@random20.net

 Licensed under the GNU Affero General Public License v3.
 See <https://www.gnu.org/licenses/> for details.
*/
/* ==========================================================================
   random20 styles.css
   Scopes: body[data-page="index"] and body[data-page="about"]
   ========================================================================== */

/* ---------- Reset (lightweight) ----------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html,body{height:100%}
img,svg,video,canvas{display:block;max-width:100%}
input,button,select,textarea{font:inherit}

/* ---------- Tokens (defaults lean to INDEX) ----------------------------- */
:root{
  /* shared brand accents */
  --neonG:#5DFF00; --neonR:#FF5D00; --neonO:#FF7A33;

  /* index defaults (dark, mono) */
  --idx-bg:#111; --idx-fg:#e7e7e7; --idx-muted:#777; --idx-line:#1c1c1c;

  /* about defaults (light, sans) */
  --abt-fg:#111; --abt-bg:#fff; --abt-soft:#eaeaea; --abt-muted:#777; --abt-accent:#0c7;
  --abt-maxw:72ch;
}

@media (prefers-color-scheme: dark){
  :root{ --abt-fg:#eee; --abt-bg:#0b0b0b; --abt-muted:#aaa; --abt-accent:#5ad; }
}

/* ==========================================================================
   INDEX PAGE (random20)
   ========================================================================== */
body[data-page="index"]{
  background:var(--idx-bg);
  color:var(--idx-fg);
  font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* layout */
body[data-page="index"] .wrap{max-width:980px;margin:0 auto;padding:32px 16px}

/* ===== Header layout ===== */
body[data-page="index"] header{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

/* title stays left */
body[data-page="index"] header h1{ order:0; }

/* buttons grouped in the middle */
body[data-page="index"] header .btn{ order:1; }

/* status defaults to wrap below buttons (mobile) */
body[data-page="index"] header .status{
  order:2;
  flex:0 0 100%;
  margin:8px 0 2px;
  color:var(--idx-muted);
  font-size:12px;
  text-align:left;
}

/* ===== Desktop: put status in the upper-right ===== */
@media (min-width: 801px){
  body[data-page="index"] header{
    flex-wrap: nowrap;                 /* keep header items on one line */
  }
  body[data-page="index"] header h1{
    order: 0;
    margin-right: 12px;
  }
  body[data-page="index"] header .btn{
    order: 1;                          /* buttons stay after the title */
  }
  body[data-page="index"] header .status{
    order: 2;                          /* status comes last in DOM flow */
    flex: 0 0 auto;                    /* shrink-to-fit */
    margin-left: auto;                 /* push to the far right */
    margin-top: 0;
    text-align: right;
  }
}

body[data-page="index"] .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.35ch;
  height:32px;padding:0 12px;
  font:12px ui-monospace,monospace;letter-spacing:.06em;line-height:1;
  border:1px solid var(--idx-line);background:#161616;color:var(--idx-fg);
  border-radius:6px;text-decoration:none;cursor:pointer
}
body[data-page="index"] .btn:hover{border-color:#9ff2e2}
body[data-page="index"] .btn:where(button){
  -webkit-appearance:none;appearance:none;background:#161616;border:1px solid var(--idx-line);padding:0 12px;
}

body[data-page="index"] hr{border:0;border-top:1px solid var(--idx-line);margin:12px 0 6px}

/* explainer */
body[data-page="index"] .explainer{font-size:11px;color:var(--idx-muted);margin:0 0 12px;line-height:1.35}
body[data-page="index"] .explainer div{padding:2px 0}
body[data-page="index"] .about{margin:5px 0 0;padding:5px 0 0;font-size:11px;color:var(--idx-muted)}
body[data-page="index"] .buttons{font-size:10px;padding:10px 0 0}

/* blocks */
body[data-page="index"] .group-block{margin:22px 0}
body[data-page="index"] .group-heading{
  font-size:11px;color:var(--neonO);margin:38px 0 6px;letter-spacing:.08em;font-style:italic
}

/* lists */
body[data-page="index"] ul{list-style:none;margin:0;padding:0}
body[data-page="index"] li{padding:2px 0;border-bottom:1px dotted var(--idx-line)}
body[data-page="index"] li:last-child{border-bottom:none}

/* ---------- Feed line (desktop-first) ----------
   Structure from script:
   .line
     .meta    -> [LINK] + .site
     .latest  -> headline + <span class="when">(5h)</span>
-------------------------------------------------*/
body[data-page="index"] .line{
  display:flex;
  align-items:baseline;
  gap:.5rem;               /* spacing instead of a dash */
  flex-wrap:nowrap;
}
body[data-page="index"] .line .meta{
  display:inline-flex;align-items:baseline;gap:.25rem;white-space:nowrap
}
body[data-page="index"] .tag a{color:var(--neonG);text-decoration:none}
body[data-page="index"] .tag a:hover{color:var(--neonR)}
body[data-page="index"] .site{color:var(--idx-muted)}

body[data-page="index"] .line .latest{
  flex:1 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--idx-fg);
}
body[data-page="index"] .line .latest .when{ color:var(--idx-muted); font-weight:normal; }

body[data-page="index"] .latest.loading{color:var(--idx-muted);font-style:italic}
body[data-page="index"] .latest.unavailable{font-size:.9em;font-style:italic;color:var(--idx-muted)}
body[data-page="index"] .latest.unavailable:hover{color:var(--idx-fg);opacity:.6;cursor:default}

/* ---------- Mobile feed layout ---------- */
@media (max-width:600px){
  /* stack buttons full-width */
  body[data-page="index"] header .btn{ flex:1 1 100%; width:100%; text-align:center; }

  /* stack each feed line for readability */
  body[data-page="index"] .line{
    flex-direction:column;align-items:flex-start;
    gap:.12rem;font-size:14px;line-height:1.4;margin-bottom:.5rem;
  }
  body[data-page="index"] .line .meta{ white-space:normal; }
  body[data-page="index"] .line .latest{
    display:block;white-space:normal;overflow:visible;text-overflow:unset;
  }
}

/* Slight upsize on very small screens for previous design’s feel */
@media (max-width:480px){
  body[data-page="index"] .line{font-size:16px}
}

/* ==========================================================================
   ABOUT PAGE (brand + readability, Random20 palette)
   ========================================================================== */
body[data-page="about"]{
  background:var(--abt-bg);
  color:var(--abt-fg);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* layout */
body[data-page="about"] main{ max-width:var(--abt-maxw); margin:3rem auto; padding:0 1rem 4rem; }

/* type */
body[data-page="about"] h1{
  font-size:2rem; margin:0 0 .75rem; color:var(--neonO); letter-spacing:.01em;
}
body[data-page="about"] h2{
  font-size:1.25rem; margin:2.25rem 0 .75rem; color:var(--abt-fg);
}

/* text cadence */
body[data-page="about"] p, body[data-page="about"] li{ color:var(--abt-fg) }
body[data-page="about"] .muted{ color:var(--abt-muted) }
body[data-page="about"] p{ margin:.75rem 0 0 }
body[data-page="about"] p + p{ margin-top:1rem }

/* links */
body[data-page="about"] a{ color:var(--neonG); text-decoration:none }
body[data-page="about"] a:hover{ text-decoration:underline }

/* code/kbd */
body[data-page="about"] .kbd{
  font:.95em/1.6 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  background:rgba(127,127,127,.08); padding:.1rem .35rem; border-radius:.35rem;
}
body[data-page="about"] code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  padding:.05rem .25rem; border-radius:.25rem; background:rgba(127,127,127,.08);
}

/* components */
body[data-page="about"] .card{ border:1px solid rgba(127,127,127,.25); border-radius:12px; padding:1rem }
body[data-page="about"] .small{ font-size:.95rem }

/* controls list */
body[data-page="about"] .controls-list{ list-style:none; padding:0; margin:.5rem 0 0 }
body[data-page="about"] .controls-item{
  display:grid; grid-template-columns:minmax(8ch,12ch) 1fr;
  column-gap:1rem; row-gap:.15rem; padding:.7rem 0 .75rem;
}
body[data-page="about"] .controls-item .label code{
  display:inline-block; padding:.05rem .45rem; border-radius:.35rem;
  background:rgba(127,127,127,.10); box-shadow:inset 0 0 0 1px rgba(127,127,127,.22);
  letter-spacing:.02em; color:var(--abt-fg); white-space:nowrap;
}
body[data-page="about"] .controls-item .desc{ color:var(--abt-fg); line-height:1.55 }
body[data-page="about"] .controls-item .desc i{ color:var(--abt-muted) }

body[data-page="about"] section p.small-muted{
  font-size:.85rem; color:var(--abt-muted); font-style:italic; margin:.5rem 0 0;
}

/* rules & lists */
body[data-page="about"] hr{ border:0; height:1px; background:rgba(127,127,127,.25); margin:2rem 0 }
body[data-page="about"] ul{ padding-left:1.1rem; margin:.25rem 0 0 }
body[data-page="about"] li{ margin:.35rem 0; line-height:1.6 }

/* closing note */
body[data-page="about"] .closing-note{
  font-style:italic; text-align:center; margin-top:2rem; font-size:1.05rem; color:var(--abt-muted)
}

body[data-page="about"] h1 a {
  color: var(--neonO);
  text-decoration: none; 
}

body[data-page="about"] p.closing-note a{ color:var(--neonO) }

/* mobile tuning */
@media (max-width:480px){
  body[data-page="about"]{ font-size:15px; line-height:1.6 }
  body[data-page="about"] h1{ font-size:1.8rem }
  body[data-page="about"] h2{ font-size:1.15rem }
  body[data-page="about"] .controls-item{ grid-template-columns:1fr; row-gap:.25rem }
}

/* Mobile: grid of 2x2 square buttons */
@media (max-width:600px){
  body[data-page="index"] header{
    display:grid;
    grid-template-columns:1fr 1fr;   /* two per row */
    gap:8px;
    justify-items:stretch;
  }

  body[data-page="index"] header .btn{
    flex:unset;                      /* override flex behavior */
    width:100%;
    height:56px;                     /* good thumb size */
    font-size:13px;
    border-radius:10px;              /* rounded cassette look */
    text-align:center;
  }

  body[data-page="index"] header h1{
    grid-column:1 / -1;              /* span full width */
    margin-bottom:6px;
    text-align:center;
  }

  body[data-page="index"] header .status{
    grid-column:1 / -1;              /* full width below buttons */
    text-align:left;
    margin-top:10px;
  }
}