/* hopper_www — identical design to datapot_www (palette from lewisu.edu/css/styles.css) */
:root { --red:#c22033; --darkRed:#940731; --black:#000; --white:#fff;
        --gray:#dcdcd7; --bg:#f1f1ef; --text:#1a1a1a; --muted:#7e7f74;
        --border:#dcdcd7; }
* { box-sizing: border-box; }
body { margin:0; font-family:'Montserrat', system-ui, sans-serif;
       background-color:var(--bg); color:var(--text);
       min-height:100vh; display:flex; flex-direction:column;
       /* faint AI-chip and circuit-trace watermarks, light tints at 50% opacity */
       background-image:
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23c7c7bc' stroke-width='3' stroke-linecap='round' opacity='.5'%3E%3Crect x='50' y='50' width='120' height='120' rx='10'/%3E%3Crect x='74' y='74' width='72' height='72' rx='6'/%3E%3Cpath d='M75 30v20M105 30v20M135 30v20M75 170v20M105 170v20M135 170v20M30 75h20M30 105h20M30 135h20M170 75h20M170 105h20M170 135h20'/%3E%3C/g%3E%3Ctext x='110' y='122' text-anchor='middle' font-family='sans-serif' font-size='34' font-weight='700' fill='%23c7c7bc' opacity='.5'%3EAI%3C/text%3E%3C/svg%3E"),
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 240'%3E%3Cg fill='none' stroke='%23dca8ae' stroke-width='2.5' stroke-linecap='round' opacity='.5'%3E%3Cpath d='M25 40H130L160 70H280'/%3E%3Ccircle cx='25' cy='40' r='5'/%3E%3Ccircle cx='287' cy='70' r='5'/%3E%3Cpath d='M25 90H180L210 120H300'/%3E%3Ccircle cx='25' cy='90' r='5'/%3E%3Ccircle cx='307' cy='120' r='5'/%3E%3Cpath d='M60 140H160L190 170H260'/%3E%3Ccircle cx='53' cy='140' r='5'/%3E%3Ccircle cx='267' cy='170' r='5'/%3E%3C/g%3E%3Cg fill='%23d0d0c6' opacity='.5'%3E%3Ccircle cx='310' cy='24' r='2.5'/%3E%3Ccircle cx='326' cy='24' r='2.5'/%3E%3Ccircle cx='342' cy='24' r='2.5'/%3E%3Ccircle cx='310' cy='40' r='2.5'/%3E%3Ccircle cx='326' cy='40' r='2.5'/%3E%3Ccircle cx='342' cy='40' r='2.5'/%3E%3Ccircle cx='310' cy='56' r='2.5'/%3E%3Ccircle cx='326' cy='56' r='2.5'/%3E%3Ccircle cx='342' cy='56' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
       background-repeat:no-repeat, no-repeat;
       background-position:left -70px bottom -50px, right -30px top 140px;
       background-size:440px 440px, 480px 320px;
       background-attachment:fixed, fixed; }

.topstrip { background:var(--black); color:var(--white);
            font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
            padding:.45rem 1.2rem; }
.topstrip a { color:var(--white); text-decoration:none; }
.masthead { background:var(--white); border-bottom:4px solid var(--red);
            padding:1rem 1.2rem; display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; }
.wordmark { color:var(--red); font-weight:800; letter-spacing:.06em;
            font-size:1.15rem; text-transform:uppercase; }
.appname  { color:var(--black); font-weight:300; font-size:1.15rem; }

nav.sitenav { background:var(--white); border-bottom:1px solid var(--border);
              padding:0 1.2rem; display:flex; gap:1.4rem; flex-wrap:wrap; }
nav.sitenav a { color:var(--text); text-decoration:none; font-size:.85rem;
                font-weight:600; padding:.75rem 0; border-bottom:3px solid transparent; }
nav.sitenav a:hover { color:var(--red); }
nav.sitenav a.active { color:var(--red); border-bottom-color:var(--red); }

main { flex:1; padding:2rem 1.2rem; }
.col { width:100%; max-width:800px; margin:0 auto; }
.card { background:var(--white); border:1px solid var(--border);
        padding:1.8rem 2rem; box-shadow:0 2px 10px rgba(0,0,0,.05); }

h1.page-title { margin:0 0 1.2rem; font-size:1.5rem; font-weight:700; color:var(--black); }
.content h1, .content h2, .content h3, .content h4 { color:var(--black); font-weight:700; margin:1.4rem 0 .6rem; }
.content h1 { font-size:1.4rem; }
.content h2 { font-size:1.2rem; }
.content h3, .content h4 { font-size:1.05rem; }
.content p { line-height:1.65; margin:0 0 1rem; }
.content a { color:var(--red); }
.content a:hover { color:var(--darkRed); }
.content img { max-width:100%; height:auto; }
.content ul, .content ol { line-height:1.65; margin:0 0 1rem; padding-left:1.4rem; }
.content figure { margin:1rem 0; }

.unavailable { color:var(--muted); font-style:italic; }

/* ---- home main content (ACCESS-CI-style sections) ------------------- */
/* Header, nav, and footer above/below are untouched; everything from here
   down styles only the landing-page sections inside <main>. */
body.page-home .col { max-width:1060px; }
.section { margin:0 0 2.2rem; }
.section-title { margin:0 0 1.1rem; font-size:1.35rem; font-weight:800; color:var(--black);
                 text-transform:uppercase; letter-spacing:.04em; }
.section-title .tick { color:var(--red); }

.hero { background:var(--white); border:1px solid var(--border); box-shadow:0 2px 10px rgba(0,0,0,.05);
        padding:3rem 2.4rem; margin-bottom:2.2rem; position:relative; overflow:hidden; }
/* flyer-style circuit traces, top right, 50% transparent */
.hero-art { position:absolute; top:1.2rem; right:0; width:340px; max-width:45%;
            height:auto; opacity:.5; pointer-events:none; }
.hero > :not(.hero-art) { position:relative; z-index:1; }
.hero-kicker { margin:0; font-size:1.6rem; font-weight:700; color:var(--black);
               text-transform:uppercase; letter-spacing:.05em; }
.hero-name { margin:0 0 .9rem; font-size:3.4rem; line-height:1.05; font-weight:800;
             color:var(--red); text-transform:uppercase; letter-spacing:.03em; }
.hero-sub { margin:0 0 1.6rem; max-width:44rem; font-size:1.02rem; line-height:1.7;
            color:var(--text); font-weight:500; }
.btn { display:inline-block; margin-right:.7rem; padding:.7rem 2.2rem;
       background:var(--red); color:var(--white); text-decoration:none;
       font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.btn:hover { background:var(--darkRed); }
.btn.ghost { background:transparent; color:var(--red); border:2px solid var(--red);
             padding:calc(.7rem - 2px) calc(2.2rem - 2px); }
.btn.ghost:hover { color:var(--darkRed); border-color:var(--darkRed); background:transparent; }

.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
         gap:1px; background:var(--border); border:1px solid var(--border);
         box-shadow:0 2px 10px rgba(0,0,0,.05); }
.stat { background:var(--white); padding:1.5rem 1.2rem; text-align:center; }
.stat-num { display:block; font-size:2.1rem; font-weight:800; color:var(--red); line-height:1.1; }
.stat-label { display:block; margin-top:.35rem; font-size:.78rem; font-weight:600;
              color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

.grid { display:grid; gap:1.2rem; }
.grid.cols-3 { grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
.grid.cols-2 { grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.tile { background:var(--white); border:1px solid var(--border);
        box-shadow:0 2px 10px rgba(0,0,0,.05); padding:1.5rem 1.6rem; }
.tile h3 { margin:0 0 .55rem; font-size:1.02rem; font-weight:700; color:var(--black); }
.tile p { margin:0; font-size:.92rem; line-height:1.65; color:var(--text); }
.tile ul { margin:.4rem 0 0; padding-left:1.2rem; font-size:.92rem; line-height:1.65; }
.tile .icon { display:flex; align-items:center; justify-content:center;
              width:48px; height:48px; margin-bottom:1rem; border-radius:10px;
              background:var(--red); }
.tile .icon svg { stroke:var(--white); fill:none; stroke-width:1.8;
                  stroke-linecap:round; stroke-linejoin:round; }

.node-name { color:var(--red); font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.node-role { display:block; margin-top:.1rem; font-size:.78rem; font-weight:600;
             color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

.steps { counter-reset:step; list-style:none; margin:0; padding:0; }
.steps li { counter-increment:step; position:relative; padding:0 0 1.1rem 3rem;
            font-size:.95rem; line-height:1.65; }
.steps li::before { content:counter(step); position:absolute; left:0; top:.05rem;
                    width:2rem; height:2rem; border-radius:50%; background:var(--red);
                    color:var(--white); font-weight:800; font-size:.95rem;
                    display:flex; align-items:center; justify-content:center; }

/* ---- system status page ---------------------------------------------- */
body.page-status .col { max-width:1060px; }
.status-dot { flex-shrink:0; width:20px; height:20px; border-radius:50%;
              background:var(--muted); }
.status-dot.green  { background:#2e9e44; box-shadow:0 0 0 4px rgba(46,158,68,.15); }
.status-dot.yellow { background:#e0a800; box-shadow:0 0 0 4px rgba(224,168,0,.15); }
.status-dot.red    { background:var(--red); box-shadow:0 0 0 4px rgba(194,32,51,.15); }
.status-dot.na     { background:var(--gray); }
.status-meta { color:var(--muted); font-size:.82rem; }
.status-meta .warn { color:var(--red); font-weight:700; }
.status-foot { margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--border); }

.sysgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
           gap:1rem 1.4rem; margin-top:1.2rem; }
.sys { display:flex; align-items:center; gap:.65rem; position:relative;
       cursor:default; }
.sys-name { font-weight:800; font-size:.95rem; }
.sys-tip { display:none; position:absolute; left:0; bottom:calc(100% + 9px);
           background:var(--black); color:var(--white); padding:.55rem .8rem;
           font-size:.74rem; line-height:1.6; white-space:nowrap; z-index:30;
           box-shadow:0 2px 10px rgba(0,0,0,.25); }
.sys-tip::after { content:""; position:absolute; top:100%; left:14px;
                  border:6px solid transparent; border-top-color:var(--black); }
.sys:hover .sys-tip, .sys.open .sys-tip { display:block; }

.maint-list { list-style:none; margin:0; padding:0; }
.maint-list li { padding:.7rem 0; border-bottom:1px solid var(--border);
                 font-size:.92rem; line-height:1.6; }
.maint-list li:last-child { border-bottom:0; }
.maint-empty { color:var(--muted); font-style:italic; }
.badge { display:inline-block; margin-right:.6rem; padding:.15rem .55rem;
         font-size:.68rem; font-weight:800; letter-spacing:.06em;
         color:var(--white); background:var(--muted); }
.b-maint  { background:#e0a800; }
.b-issue  { background:var(--red); }
.b-update { background:#2e9e44; }
.b-notice { background:var(--black); }
.tile h3 .c-val { float:right; color:var(--red); font-weight:800; }
svg.chart { display:block; width:100%; height:auto; margin-top:.4rem; }
.c-line { fill:none; stroke:var(--red); stroke-width:2; stroke-linejoin:round; }
.c-grid { stroke:var(--border); stroke-width:1; }
.c-tick { fill:var(--muted); font-size:10px; font-family:'Montserrat', sans-serif; }
.c-na   { fill:var(--muted); font-size:12px; font-style:italic; }
.node-meta { font-size:.92rem; line-height:1.6; }
pre.procs { margin:.6rem 0 0; padding:1rem 1.2rem; background:var(--bg);
            border:1px solid var(--border); overflow-x:auto;
            font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size:.72rem; line-height:1.5; }
.proc-scroll { overflow-x:auto; margin-top:.6rem; }
.proc-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.proc-table th { text-align:left; padding:.45rem .6rem; white-space:nowrap;
                 border-bottom:2px solid var(--red); color:var(--muted);
                 font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; }
.proc-table td { padding:.4rem .6rem; border-bottom:1px solid var(--border);
                 white-space:nowrap; }
.proc-table td.pc { color:var(--red); font-weight:700; }
.proc-table td.cmd { overflow:hidden; text-overflow:ellipsis; max-width:420px;
                     font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
                     font-size:.74rem; }
.proc-table tr.extra { display:none; }
.proc-table.expanded tr.extra { display:table-row; }
.show-more { margin-top:.9rem; padding:.45rem 1.4rem; background:transparent;
             border:2px solid var(--red); color:var(--red); cursor:pointer;
             font-family:inherit; font-size:.75rem; font-weight:700;
             text-transform:uppercase; letter-spacing:.06em; }
.show-more:hover { color:var(--darkRed); border-color:var(--darkRed); }

/* ---- wiki page: full-page MediaWiki embed ----------------------------- */
body.page-wiki .col { max-width:1280px; }
.wiki-bar { display:flex; justify-content:flex-end; align-items:baseline;
            gap:1rem; flex-wrap:wrap; margin-bottom:.7rem;
            font-size:.85rem; font-weight:600; }
.wiki-bar a { color:var(--red); text-decoration:none; }
.wiki-bar a:hover { color:var(--darkRed); }
.wiki-embed { display:block; width:100%; height:calc(100vh - 275px);
              min-height:600px; border:1px solid var(--border);
              background:var(--white); box-shadow:0 2px 10px rgba(0,0,0,.05); }

/* ---- login page ------------------------------------------------------- */
.auth-form { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.2rem; }
.auth-form input[type=email] { flex:1; min-width:220px; padding:.65rem .9rem;
                               border:1px solid var(--border); background:var(--white);
                               font-family:inherit; font-size:.92rem; }
.auth-form input[type=email]:focus { outline:2px solid var(--red); border-color:var(--red); }

/* Lewis University logo, pinned bottom-right, 30% transparent */
.corner-logo { position:fixed; right:18px; bottom:18px; width:110px; height:auto;
               opacity:.7; pointer-events:none; z-index:50; }

@media (max-width:640px) {
  .hero { padding:2rem 1.4rem; }
  .hero-name { font-size:2.4rem; }
  .corner-logo { width:70px; right:12px; bottom:12px; }
}

footer { background:var(--black); color:var(--white); padding:1.4rem 1.2rem;
         font-size:.78rem; line-height:1.6; margin-top:auto; }
footer a { color:var(--white); }
footer .fmuted { color:#bab9af; }
.credit { display:flex; align-items:center; gap:.45rem; margin-top:.9rem;
          color:#bab9af; font-size:.74rem; }
.credit svg { flex-shrink:0; }