/* Vigil (vigil.athena.org.tr): its own small stylesheet, deliberately not shared with hub.css (different origin, no CSP
   cross-origin stylesheet). Everything up to the "Vigil-specific additions" marker below is copied verbatim from
   hub/static/hub.css's design system -- variables, header/nav, hero, cards/grid, forms, tables -- omitting only the
   rules for pages Vigil doesn't have (login-provider buttons, the admin page, coffee-redemption UI). One selector
   was widened on purpose: input[type=url] and input[type=number] were added alongside hub.css's text/password list
   because Vigil's own form fields use those types. Keep this in sync by hand if the hub's palette or shared
   components change. Vigil does not offer the accent-picker / light-dark toggle UI, but the :root variables and
   data-mode/data-accent selectors are kept anyway so the two stylesheets stay diffable; they simply never trigger
   since Vigil's <html> never sets those attributes -- light/dark still follows the system automatically. */
:root{--bg:#f6f7fc;--bg2:#eceffa;--panel:#fff;--ink:#141a33;--mute:#59628a;--line:#dde2f2;--acc:#0aa89b;--acc2:#7a6cf0;--on-acc:#fff;--ok:#1f9d63;--warn:#b87400;--bad:#d64545;--r:18px;--shadow:0 10px 34px rgba(20,26,51,.09);--grad:linear-gradient(135deg,var(--acc),var(--acc2));--hero:radial-gradient(1200px 500px at 15% -10%,color-mix(in srgb,var(--acc) 22%,transparent),transparent),radial-gradient(900px 500px at 95% 0,color-mix(in srgb,var(--acc2) 20%,transparent),transparent)}
@media(prefers-color-scheme:dark){:root:not([data-mode="light"]){--bg:#0b1020;--bg2:#111935;--panel:#141d3b;--ink:#eef1ff;--mute:#a3acd0;--line:#26305a;--acc:#19d3c4;--acc2:#9d8cff;--on-acc:#06122a;--ok:#4ade9a;--warn:#f5b83d;--bad:#ff7a7a;--shadow:0 10px 34px rgba(0,0,0,.35)}}
:root[data-mode="dark"]{--bg:#0b1020;--bg2:#111935;--panel:#141d3b;--ink:#eef1ff;--mute:#a3acd0;--line:#26305a;--acc:#19d3c4;--acc2:#9d8cff;--on-acc:#06122a;--ok:#4ade9a;--warn:#f5b83d;--bad:#ff7a7a;--shadow:0 10px 34px rgba(0,0,0,.35)}
:root[data-accent="pink"]{--acc:#e0559a;--acc2:#8b6cf0}:root[data-accent="blue"]{--acc:#2f7de1;--acc2:#19c3b3}:root[data-accent="gold"]{--acc:#d99a06;--acc2:#e0559a}:root[data-accent="violet"]{--acc:#7a5cf0;--acc2:#e0559a}
@media(prefers-color-scheme:dark){:root:not([data-mode="light"])[data-accent="pink"]{--acc:#ff7ab8}:root:not([data-mode="light"])[data-accent="blue"]{--acc:#63a3ff}:root:not([data-mode="light"])[data-accent="gold"]{--acc:#f2c230}:root:not([data-mode="light"])[data-accent="violet"]{--acc:#a893ff}}
:root[data-mode="dark"][data-accent="pink"]{--acc:#ff7ab8}:root[data-mode="dark"][data-accent="blue"]{--acc:#63a3ff}:root[data-mode="dark"][data-accent="gold"]{--acc:#f2c230}:root[data-mode="dark"][data-accent="violet"]{--acc:#a893ff}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--acc)}a:hover{text-decoration:none}img,svg{max-width:100%}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--panel);padding:8px 14px;border-radius:10px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 70%,transparent);outline-offset:2px;border-radius:8px}
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:21px;letter-spacing:.2px}.brand img{width:34px;height:34px}
.nav nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}.nav nav a{color:var(--mute);text-decoration:none;padding:7px 13px;border-radius:99px;font-weight:600;font-size:15px}.nav nav a:hover,.nav nav a[aria-current="page"]{background:var(--bg2);color:var(--ink)}
.tools{display:flex;align-items:center;gap:8px}
.icon-btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:99px;min-width:38px;height:38px;padding:0 12px;cursor:pointer;font:inherit;font-size:14px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{border-color:var(--acc)}
.dots{display:inline-flex;gap:5px}.dots button{width:18px;height:18px;border-radius:50%;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}.dots button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--acc)}.btn.pri{background:var(--grad);color:var(--on-acc);border-color:transparent;box-shadow:0 8px 22px color-mix(in srgb,var(--acc) 35%,transparent)}.btn.pri:hover{filter:brightness(1.06)}
.btn.sm{padding:7px 14px;font-size:14px}.btn.coffee{background:#ffdd57;color:#3a2a00;border-color:transparent}.btn.danger{color:var(--bad)}.btn[disabled]{opacity:.55;cursor:not-allowed}
.hero{background:var(--hero);padding:76px 0 56px;text-align:center}
.hero .mark{width:104px;height:104px;filter:drop-shadow(0 12px 24px color-mix(in srgb,var(--acc) 40%,transparent))}
h1{font-size:clamp(32px,5vw,54px);line-height:1.12;margin:.35em 0 .3em;letter-spacing:-.5px}
h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(24px,3vw,32px);margin:0 0 .5em;letter-spacing:-.3px}h3{margin:.2em 0 .4em;font-size:19px}
.lead{max-width:720px;margin:0 auto 28px;color:var(--mute);font-size:19px}.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.band{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:34px;color:var(--mute);font-weight:700;letter-spacing:.5px}.band span{padding:4px 12px;border-radius:99px;background:color-mix(in srgb,var(--acc) 10%,transparent)}
section.block{padding:48px 0}section.alt{background:var(--bg2)}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.card p{margin:.3em 0 0;color:var(--mute)}.card .ic{font-size:30px;display:block;margin-bottom:6px}
.tool{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;transition:transform .15s}.tool:hover{transform:translateY(-3px)}
.badge{display:inline-block;font-size:12.5px;font-weight:800;padding:2px 11px;border-radius:99px;background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc);letter-spacing:.3px}.badge.soon{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.two{display:grid;gap:26px;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.two>*{min-width:0}@media(max-width:860px){.two{grid-template-columns:minmax(0,1fr)}}
pre.code{max-width:100%}
ul.tick{list-style:none;padding:0;margin:0;display:grid;gap:14px}ul.tick li{padding-left:34px;position:relative}ul.tick li::before{content:"✦";position:absolute;left:4px;top:0;color:var(--acc)}ul.tick b{display:block}
.page{padding:44px 0 64px}.page h1{font-size:clamp(28px,4vw,42px);text-align:left}.crumbs{font-size:14px;color:var(--mute);margin-bottom:6px}.crumbs a{color:var(--mute)}
.prose{max-width:780px}.prose p,.prose li{color:var(--ink)}.prose h2{margin-top:1.6em}.prose .muted{color:var(--mute)}
.tbl{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.tbl th,.tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}.tbl tr:last-child td{border-bottom:0}.tbl thead th{background:var(--bg2);font-size:14px}.tbl td.me,.tbl th.me{background:color-mix(in srgb,var(--acc) 9%,transparent)}
.scroll{overflow-x:auto}
details{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:12px 18px;margin:10px 0}summary{cursor:pointer;font-weight:700}details p{color:var(--mute);margin:.6em 0 0}
.narrow{max-width:440px;margin-inline:auto}.form{display:grid;gap:14px}label.f{display:grid;gap:6px;font-weight:700;font-size:14px}
input[type=text],input[type=password],input[type=url],input[type=number]{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}input:focus{outline:3px solid color-mix(in srgb,var(--acc) 45%,transparent);border-color:var(--acc)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.err{color:var(--bad);min-height:1.4em;font-weight:600}.ok{color:var(--ok);font-weight:600}.small{font-size:14px;color:var(--mute)}
.acc-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:18px}
.quota{height:10px;border-radius:99px;background:var(--bg2);overflow:hidden;margin:10px 0 6px}.quota i{display:block;height:100%;background:var(--grad);border-radius:99px}
.tier{display:inline-block;padding:3px 14px;border-radius:99px;background:var(--grad);color:var(--on-acc);font-weight:800}
.mono{font-family:ui-monospace,Consolas,monospace;word-break:break-all;background:var(--bg2);padding:8px 10px;border-radius:10px;display:block}
footer{border-top:1px solid var(--line);padding:30px 0 40px;color:var(--mute);font-size:14.5px}footer .wrap{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap}footer a{color:var(--mute)}.dev{font-weight:700;color:var(--ink)}
noscript .card{margin:20px auto}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
#auth-slot .btn{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
@media(max-width:720px){.top{position:static}.nav{gap:6px 10px;min-height:0;padding:8px 0}.brand{font-size:19px}.brand img{width:30px;height:30px}.tools{margin-left:auto;flex-wrap:nowrap;gap:6px}.tools .dots{display:none}
.tools #auth-slot a:not(.pri):not([href$="/yonetim"]):not([href$="/en/admin"]){display:none}.tools #auth-slot .btn{padding:8px 12px;min-height:38px}.icon-btn{min-width:38px;height:38px}
.nav nav{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap;gap:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.nav nav::-webkit-scrollbar{display:none}.nav nav a{padding:6px 12px;font-size:14px;white-space:nowrap}
.hero{padding-top:34px}.card{padding:16px}.wrap{padding-left:16px;padding-right:16px}h1{overflow-wrap:anywhere}pre.code{font-size:12px}.tbl th,.tbl td{padding:9px 10px}}
@media(max-width:380px){.brand span{font-size:17px}.tools #auth-slot .btn{padding:8px 10px;font-size:13px}}
body{overflow-x:hidden}
.narrow .small{margin:.6em 0 1.2em}
.prose ul{padding-left:20px;display:grid;gap:8px}.prose h2{font-size:22px}
pre.code{margin:12px 0;padding:14px 16px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;font:13px/1.55 ui-monospace,Consolas,monospace;white-space:pre}
pre.code code{background:none;padding:0;font:inherit}
.hourbars{display:flex;align-items:flex-end;gap:2px;height:34px;min-width:170px}
.hourbars span{flex:1;background:var(--acc);border-radius:2px 2px 0 0;opacity:.85}
.vig-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.vig-row:last-child{border-bottom:0}
.vig-dot{width:11px;height:11px;border-radius:50%;flex:none;background:var(--mute)}
.vig-dot.ok{background:var(--ok)}.vig-dot.down{background:var(--bad)}
.vig-name{min-width:90px;font-weight:700}
.vigilbars{display:flex;gap:2px;height:20px;min-width:170px;flex:none}
.vigilbars span{flex:1;border-radius:2px;background:var(--line)}
.vigilbars span.ok{background:var(--ok)}.vigilbars span.part{background:var(--warn)}.vigilbars span.down{background:var(--bad)}

/* ---------- Vigil-specific additions (not in hub.css): same variables, no new colours ---------- */
/* the brand mark: a small solid dot instead of hub's img logo (Vigil ships no separate svg asset) */
.brand .dot{width:14px;height:14px;border-radius:50%;background:var(--grad);flex:none}
/* checkboxes appear in the add-monitor and edit-monitor forms; hub.css does not style them */
input[type=checkbox]{width:18px;height:18px;accent-color:var(--acc)}
/* the response-time sparkline (vigil/static/app.js's sparkline()), drawn as inline SVG inside a .card */
.spark{width:100%;max-width:420px;height:44px;display:block}
/* a monitor's own name, used as the link to its detail screen */
.vig-row a.b{font-weight:800;color:var(--ink);text-decoration:none;font-size:17px}
.vig-row a.b:hover{color:var(--acc);text-decoration:underline}
/* the monitor list is a plain .tbl (see app.js renderList()/monitorRow()) rather than a card grid -- an ops panel
   should read as a dense status table, not a set of feature cards. A down row gets a soft red wash so trouble is
   visible without reading every line; a paused/disabled row is dimmed instead. .vig-row inside a table cell needs
   no bottom border of its own, the row's own border already separates entries. */
.vig-row{border-bottom:0}
.tbl tr.vig-down{background:color-mix(in srgb,var(--bad) 8%,transparent)}
.tbl tr.vig-paused{opacity:.6}
/* the summary strip above the table: at-a-glance counts, so a problem is visible before reading a single row.
   Neutral by default; a soft red border/wash when at least one monitor is down. */
.vig-summary{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:14px 18px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);margin:14px 0}
.vig-summary.down{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 6%,var(--panel))}
.vig-stat{display:inline-flex;align-items:center;gap:7px;font-weight:800}
.vig-stat.ok{color:var(--ok)}.vig-stat.down{color:var(--bad)}
/* the toolbar row above the table: add-monitor toggle + push button, replacing what used to be two full-width
   cards shown on every visit regardless of whether you had anything to add or configure */
.vig-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
/* narrow screens: squeezing Monitör/Uptime/Saatlik/actions into ~340px of usable width wrapped every cell's text
   onto its own line and clipped the actions column entirely -- give the table a sane minimum width instead and
   let .scroll's overflow-x do an ordinary horizontal scroll, exactly like any other wide table on a phone. */
@media(max-width:480px){
  .scroll .tbl{min-width:560px}
  .tbl th,.tbl td{padding:10px 8px}
}