/* The DM Loop Hub. Colour tokens and fonts from thedmloop.com (TheLoop-Site/styles.css),
   with a light variant. No build step. */
:root{
  color-scheme: dark;
  --bg:#0B0A0C;
  --bg-2:#0A1114;
  --panel:#141216;
  --panel-2:#1B181D;
  --text:#F5F3F4;
  --dim:#A39BA0;
  --hair:rgba(255,255,255,.08);
  --hair-2:rgba(255,255,255,.14);
  --hair-3:rgba(255,255,255,.28);
  --btn-bg:#F5F3F4;
  --btn-fg:#0B0A0C;

  --open:#FF3347;
  --open-bright:#FF6872;
  --open-a10:rgba(255,51,71,.10);
  --open-a40:rgba(255,51,71,.42);
  --close:#3FD4CC;
  --close-a10:rgba(63,212,204,.10);
  --close-a40:rgba(63,212,204,.42);
  --mint:#4ADE9A;
  --mint-a10:rgba(74,222,154,.10);
  --warn:#F5B94A;
  --warn-a10:rgba(245,185,74,.12);

  --sans:"Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter:16px;
  --max:60rem;
}
@media (prefers-color-scheme: light){
  :root{
    color-scheme: light;
    --bg:#FAF8F9;
    --bg-2:#F1F6F7;
    --panel:#FFFFFF;
    --panel-2:#F4F1F3;
    --text:#141216;
    --dim:#62595E;
    --hair:rgba(20,18,22,.09);
    --hair-2:rgba(20,18,22,.16);
    --hair-3:rgba(20,18,22,.32);
    --btn-bg:#141216;
    --btn-fg:#FFFFFF;
    --open:#E0192F;
    --open-bright:#E0192F;
    --close:#0E9C95;
    --mint:#16975C;
    --warn:#A86B00;
  }
}
@media (min-width:768px){ :root{ --gutter:24px; } }

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh;
  background-color:var(--bg);
  background-image:linear-gradient(100deg, var(--bg) 30%, var(--bg-2) 100%);
  background-attachment:fixed;
  color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
h1,h2,h3,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--text); outline-offset:3px; }

.wrap{ max-width:var(--max); margin-inline:auto; padding:0 var(--gutter) 64px; }

/* Header */
.top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0; border-bottom:1px solid var(--hair); margin-bottom:28px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; text-decoration:none; font-size:17px; }
.nav{ display:flex; align-items:center; gap:4px; }
.nav a, .nav button{
  font:500 14px/1 var(--sans); color:var(--dim); text-decoration:none; background:none; border:0;
  padding:10px 12px; border-radius:999px; cursor:pointer;
}
.nav a:hover, .nav button:hover, .nav a[aria-current="page"]{ color:var(--text); background:var(--panel-2); }
.nav form{ margin:0; }

/* Type */
.kicker{ font:500 12px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.h1{ font-weight:800; font-size:clamp(1.8rem, 1.4rem + 2vw, 2.6rem); line-height:1.05; letter-spacing:-.04em; margin-top:8px; }
.h2{ font-weight:700; font-size:1.25rem; letter-spacing:-.02em; }
.dim{ color:var(--dim); }
.small{ font-size:14px; }
.t-open{ color:var(--open); }
.t-close{ color:var(--close); }
.section{ margin-top:36px; }
.section > .h2{ margin-bottom:14px; }

/* Cards */
.card{ background:var(--panel); border:1px solid var(--hair); border-radius:18px; padding:20px; }
.card + .card{ margin-top:12px; }
.grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:720px){ .grid.two{ grid-template-columns:1fr 1fr; } .grid.three{ grid-template-columns:repeat(3, 1fr); } }
.tool{ display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; }
.tool.open{ border-color:var(--open-a40); background:linear-gradient(160deg, var(--open-a10), transparent 60%), var(--panel); }
.tool.close{ border-color:var(--close-a40); background:linear-gradient(160deg, var(--close-a10), transparent 60%), var(--panel); }
.tool .name{ font-weight:800; font-size:1.4rem; letter-spacing:-.03em; }
.tool .actions{ margin-top:auto; padding-top:6px; }

.plan{ display:flex; flex-direction:column; gap:10px; }
.plan.current{ border-color:var(--hair-3); }
.plan.highlight{ border-color:var(--close-a40); box-shadow:0 0 0 1px var(--close-a40) inset; }
.plan .price{ font-weight:800; font-size:1.7rem; letter-spacing:-.03em; }
.plan .price small{ font-size:14px; font-weight:500; color:var(--dim); letter-spacing:0; }
.plan ul{ display:grid; gap:6px; font-size:14px; color:var(--dim); }
.plan li::before{ content:"·"; margin-right:8px; color:var(--text); }
.plan .actions{ margin-top:auto; padding-top:6px; }

.row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.spread{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }

/* Pills */
.pill{ display:inline-flex; align-items:center; gap:6px; font:600 12px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px; border:1px solid var(--hair-2); color:var(--dim); white-space:nowrap; }
.pill.ok{ color:var(--mint); border-color:currentColor; background:var(--mint-a10); }
.pill.warn{ color:var(--warn); border-color:currentColor; background:var(--warn-a10); }
.pill.bad{ color:var(--open); border-color:currentColor; background:var(--open-a10); }

/* Notices */
.notice{ border-radius:14px; padding:12px 14px; font-size:15px; border:1px solid var(--hair-2); background:var(--panel-2); margin-top:12px; }
.notice.warn{ border-color:var(--warn); background:var(--warn-a10); }
.notice.bad{ border-color:var(--open); background:var(--open-a10); }
.notice.ok{ border-color:var(--mint); background:var(--mint-a10); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px; border-radius:999px;
  font:600 15px/1 var(--sans); letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
  border:1px solid transparent; cursor:pointer; background:var(--btn-bg); color:var(--btn-fg);
}
.btn:disabled{ opacity:.5; cursor:default; }
.btn.ghost{ background:transparent; color:var(--text); border-color:var(--hair-3); }
.btn.open{ background:var(--open); color:#fff; }
.btn.close{ background:var(--close); color:#0B0A0C; }
.btn.block{ width:100%; }
.linkish{ background:none; border:0; padding:0; color:var(--dim); text-decoration:underline; cursor:pointer; font:inherit; }

/* Forms */
.auth{ max-width:26rem; margin:8vh auto 0; }
label{ display:block; font-size:14px; color:var(--dim); margin:14px 0 6px; }
input[type=email], input[type=password], input[type=text]{
  width:100%; min-height:46px; padding:0 14px; border-radius:12px; font:16px var(--sans);
  background:var(--panel-2); color:var(--text); border:1px solid var(--hair-2);
}
input:focus{ outline:none; border-color:var(--hair-3); }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--text); margin:0; }
.check input{ margin-top:4px; width:18px; height:18px; }
.error{ color:var(--open); font-size:14px; margin-top:12px; min-height:1em; }

/* History */
.history li{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--hair); font-size:15px; }
.history li:first-child{ border-top:0; }

/* Modal */
.modal{ position:fixed; inset:0; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.55); padding:16px; z-index:50; }
@media (min-width:600px){ .modal{ align-items:center; } }
.modal .card{ width:100%; max-width:28rem; }
.modal .h2{ margin-bottom:8px; }

.skeleton{ color:var(--dim); }