/* Shared look for the Muddy Ranch team site, on Tabler's design tokens (Curtis 2026-10-26).
   Light and dark follow the device; /login/theme.js adds a switch that overrides it.
   Pages use the short names below (--bg, --card, --line, --text, --muted, --accent ...). */
@import url("/login/tabler-tokens.css");
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/login/fonts/inter-latin-wght-normal.woff2") format("woff2")}
:root{color-scheme:light dark}
[data-bs-theme=light]{color-scheme:light}
[data-bs-theme=dark]{color-scheme:dark}
:root{--bg:var(--tblr-bg-surface-secondary);--card:var(--tblr-bg-surface);--line:var(--tblr-border-color);
  --text:var(--tblr-body-color);--muted:var(--tblr-secondary);--accent:var(--tblr-primary);--on-accent:#fff;
  --accent-lt:var(--tblr-primary-lt);--err:var(--tblr-red);
  --ok:var(--tblr-green);--warn:var(--tblr-yellow);--bad:var(--tblr-red);--info:var(--tblr-azure);--none:var(--tblr-border-color);
  --ok-lt:var(--tblr-green-lt);--warn-lt:var(--tblr-yellow-lt);--bad-lt:var(--tblr-red-lt);--info-lt:var(--tblr-azure-lt);
  --radius:6px;--shadow:0 1px 2px rgba(24,36,51,.06),0 0 0 1px var(--tblr-border-color)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);
     font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.45;
     -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
h1{font-size:20px;font-weight:600;margin:0;line-height:1.3}
.sub{color:var(--muted);margin:4px 0 22px}
.card{max-width:380px;margin:12vh auto 0;padding:28px 24px;background:var(--card);
      border-radius:var(--radius);box-shadow:var(--shadow)}
@media (max-width:440px){.card{margin:6vh 16px 0}}
label{display:block;font-size:13px;font-weight:500;color:var(--text);margin:0 0 14px}
input,select,textarea{font-family:inherit}
input{display:block;width:100%;margin-top:6px;padding:9px 11px;font-size:16px;color:var(--text);
      background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
button{width:100%;padding:10px 14px;font-size:14px;font-weight:600;font-family:inherit;color:var(--on-accent);background:var(--accent);
       border:1px solid var(--accent);border-radius:var(--radius);cursor:pointer;margin-top:6px}
button:hover{filter:brightness(1.07)}
.err{color:var(--err);min-height:1.2em;margin:14px 0 0}
.note{color:var(--muted);margin:0 0 16px}

/* header bar and home tiles */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;
     max-width:960px;margin:0 auto;padding:16px 16px 12px}
body>.top{max-width:none;background:var(--card);border-bottom:1px solid var(--line);
     padding:14px max(16px,calc((100% - 960px)/2 + 16px))}
.top>div:first-child>a{color:var(--muted);text-decoration:none;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.who{color:var(--muted);font-size:13px;text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.who button,.themebtn{width:auto;margin:0;padding:6px 12px;font-size:13px;font-weight:500;background:var(--card);
            color:var(--text);border:1px solid var(--line);box-shadow:0 1px 1px rgba(24,36,51,.04)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;
       max-width:960px;margin:0 auto;padding:20px 16px}
.tile{display:block;padding:20px 18px;min-height:120px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
      color:var(--text);text-decoration:none;transition:box-shadow .15s}
.tile:hover,.tile:focus{box-shadow:0 0 0 1px var(--accent),0 4px 12px rgba(24,36,51,.08);outline:0}
.tile .ic{width:40px;height:40px;border-radius:var(--radius);background:var(--accent-lt);color:var(--accent);
          font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center}
.tile b{display:block;font-size:16px;font-weight:600;margin:12px 0 4px}
.tile span{color:var(--muted);font-size:13px}
[hidden]{display:none!important}
