/* Texas Draft brand tokens: red is an accent only; body text is black on white. */
:root{--ink:#1A1A1A;--red:#C41200;--steel:#58595B;--cool:#E7E8E9;--line:#c9cacc;--wash:#f3f3f4;
  --body:Calibri,Carlito,'Segoe UI',Arial,sans-serif;--head:Arial,Helvetica,sans-serif;--black:'Arial Black','Arial Bold',Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{min-height:100%;display:flex;flex-direction:column;font:16px/1.45 var(--body);color:var(--ink);background:#fff}
a{color:var(--ink);text-underline-offset:2px}
a:hover{color:var(--red)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.top{display:flex;align-items:center;gap:28px;padding:10px 28px 10px 16px;border-bottom:2px solid var(--red);flex-wrap:wrap}
.brand img{display:block;width:150px;height:auto}
.top nav{display:flex;gap:4px;flex:1}
.top nav a{font:700 14px/1 var(--head);text-decoration:none;padding:10px 12px;border-bottom:3px solid transparent}
.top nav a:hover{color:var(--ink);border-bottom-color:var(--cool)}
.top nav a[aria-current=page]{border-bottom-color:var(--red)}
.who{display:flex;align-items:center;gap:14px;font-size:14.5px;color:var(--steel)}
.who b{color:var(--ink)}
button.link{border:0;background:none;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer;text-underline-offset:2px}
button.link:hover{color:var(--red)}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:36px 28px 56px;flex:1}
.wrap.narrow{max-width:460px}
h1{font:900 30px/1.1 var(--black);margin-bottom:6px}
.lede{color:var(--steel);margin-bottom:28px;max-width:70ch}
h2{font:700 17px/1.2 var(--head);padding-bottom:6px;border-bottom:1px solid var(--red);margin:0 0 14px}
section{margin-bottom:40px}
.quiet{color:var(--steel);font-size:14.5px;margin-top:14px}
.cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px}
@media (max-width:820px){.cols{grid-template-columns:1fr;gap:8px}.top{gap:14px}.wrap{padding:26px 18px 44px}}

/* the tool index: big names on a ruled list, not a card grid */
.tool{display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:center;padding:16px 0 18px;border-bottom:1px solid var(--cool)}
.tool h3{font:900 21px/1.15 var(--black)}
.tool h3 a{text-decoration:none}
.tool p{grid-column:1;color:var(--steel);max-width:58ch}
.tool .go{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:center}

.btn{display:inline-block;font:700 14px/1 var(--head);padding:11px 16px;border:1.5px solid var(--ink);border-radius:2px;background:#fff;color:var(--ink);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--cool);color:var(--ink)}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:#000;color:#fff}
.btn.small{padding:7px 10px;font-size:12.5px;border-width:1px;border-color:var(--line)}
.btn.small:hover{border-color:var(--steel)}
.btn:disabled{opacity:.5;cursor:default}

label{display:block;font-size:14.5px;color:var(--steel)}
input,select{display:block;width:100%;margin-top:4px;font:16px/1.3 var(--body);color:var(--ink);padding:9px 10px;border:1px solid var(--line);border-radius:2px;background:#fff}
input:focus,select:focus{border-color:var(--ink)}
form.stack{display:grid;gap:16px;max-width:400px}
form.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;align-items:end}
form.grid .actions{grid-column:1 / -1}
@media (max-width:640px){form.grid{grid-template-columns:1fr}}
.msg{font-weight:700;min-height:1.4em}
.msg.bad{color:var(--red)}
.bar{display:flex;gap:14px;margin-bottom:16px;align-items:center}
.bar input{margin:0;max-width:420px}

table{width:100%;border-collapse:collapse;font-size:15px}
th{font:700 12.5px/1.2 var(--head);text-align:left;color:#fff;background:var(--ink);padding:8px 10px;white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--cool);vertical-align:middle}
th.r,td.r{text-align:right;font-variant-numeric:tabular-nums}
td.acts{text-align:right;white-space:nowrap}
td.acts .btn{margin-left:6px}
td small,.sub{color:var(--steel);font-size:13.5px}
tr.group td{background:var(--cool);font:700 13.5px/1.2 var(--head);padding:7px 10px}
.co{margin-top:22px}
.cohead{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:9px 10px;background:var(--ink);color:#fff}
.cohead h3{font:700 15px/1.2 var(--head)}
.cohead .cnt{font-size:13.5px;flex:1}
.cohead .btn.small{border-color:#fff}
.co .none{padding:10px;border-bottom:1px solid var(--cool);color:var(--steel)}
.co table th{background:var(--cool);color:var(--ink)}
td.acts select{display:inline-block;width:auto;margin:0 0 0 6px;padding:5px 6px;font:700 12.5px/1 var(--head)}
[hidden]{display:none!important}
#inviteFor{grid-column:1 / -1}
tr.off td{color:var(--steel)}
.pill{display:inline-block;font:700 11.5px/1 var(--head);padding:3px 6px;border-radius:2px;background:var(--cool);color:var(--ink)}
.pill.on{background:var(--ink);color:#fff}
.pill.wait{background:#fff;outline:1px solid var(--steel)}
tr.pend td{background:var(--wash)}
.tablewrap{overflow-x:auto}
.empty{padding:18px 0;color:var(--steel)}
.recent a{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:10px 0;border-bottom:1px solid var(--cool);text-decoration:none}
.recent a:hover b{color:var(--red)}
.recent small{color:var(--steel);grid-column:1 / -1}
.recent span{color:var(--steel);font-size:14px;white-space:nowrap}

/* a freshly made link or code: the one thing on the page that should shout */
.made{margin-top:18px;border:1.5px solid var(--ink);border-left:6px solid var(--red);padding:14px 16px}
.made .code{font:900 26px/1.2 var(--black);letter-spacing:.06em;margin:2px 0 8px}
.made input{font-size:14.5px;margin:6px 0 10px}
.made .row{display:flex;gap:8px;flex-wrap:wrap}

.foot{padding:16px 28px;border-top:1px solid var(--cool);font-size:13.5px;color:var(--steel)}
/* edit / delete dialogs */
.dlg{border:1.5px solid var(--ink);border-top:6px solid var(--red);border-radius:2px;padding:20px 22px;width:min(460px,calc(100vw - 32px));color:var(--ink);margin:auto}
.dlg::backdrop{background:rgba(26,26,26,.55)}
.dlg form{display:grid;gap:14px}
.dlg h2{border:0;padding:0;margin:0;font:900 19px/1.2 var(--black)}
.dlg fieldset{border:0}
.dlg legend{font-size:14.5px;color:var(--steel);margin-bottom:4px}
.dlg label.pick{display:flex;gap:8px;align-items:flex-start;color:var(--ink);font-size:16px;margin-top:6px}
.dlg label.pick input{width:auto;margin:4px 0 0}
.dlg .msg{min-height:0}
.dlg .msg:empty{display:none}
.dlg .row{display:flex;gap:8px}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger:hover{background:#a50f00;color:#fff}
td.acts .btn.del:hover{border-color:var(--red);color:var(--red)}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:2px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .15s}
#toast.show{opacity:1}
@media (prefers-reduced-motion:reduce){#toast{transition:none}}