/* =====================================================================
   Leitco — component library
   ---------------------------------------------------------------------
   LAYER 3 of 3. Cards, tiles, pills, buttons, forms, tables, messages.

   ONLY for pages we own: the dashboard, the tracker, the scan library,
   accounts, login, the style guide. NEVER load this into viewer.html or
   tool.html — .btn .card .panel .pill .wrap .empty .field .hint and
   others are already spoken for in those files and would break them.
   Those two get tokens + chrome only.

   Requires leitco-tokens.css. Pairs with leitco-chrome.css.
   ===================================================================== */

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--f-ui);
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}
a{color:var(--charcoal)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* The drafting grid now lives in leitco-chrome.css, so the two big
   apps get it too. See the note there. */

/* ------------------------------------------------------------ layout */
.wrap{position:relative;z-index:1;max-width:var(--wrap-w);margin:0 auto;padding:var(--s5) var(--s4) 60px}
.wrap-narrow{max-width:560px}
.stack>*+*{margin-top:var(--s4)}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}

/* ------------------------------------------------------------- tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);margin-bottom:var(--s5)}
.tile{
  background:var(--white);border:1px solid var(--line);
  border-top:var(--rule) solid var(--gold);border-radius:var(--r);
  padding:14px var(--s4);
}
.tile .n{font-family:var(--f-num);font-size:23px;font-weight:bold;color:var(--charcoal);line-height:1.1}
.tile .t{font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:var(--mut);margin-top:var(--s1)}
.tile.alert{border-top-color:var(--stop)}
.tile.alert .n{color:var(--stop)}
.tile a{text-decoration:none;color:inherit;display:block}

/* ------------------------------------------------------------- cards */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card>h2{
  margin:0;padding:var(--s3) var(--s4);
  font-size:11px;font-weight:bold;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--white);background:var(--charcoal);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;
}
.card-pad{padding:var(--s4)}
.panel{background:var(--white);border:1px solid var(--line);border-top:var(--rule) solid var(--gold);
  border-radius:var(--r);padding:var(--s5)}

/* -------------------------------------------------------------- rows */
.row{border-bottom:1px solid var(--line);padding:14px var(--s4)}
.row:last-child{border-bottom:none}
.row.muted{background:#FBF7F6}
.row-top{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.ttl{font-size:14.5px;font-weight:bold;color:var(--charcoal)}
.sub{font-size:12px;color:var(--mut)}
.meta{margin-top:7px;font-size:12px;color:var(--mut);line-height:1.8}
.meta b{color:var(--ink)}

/* ------------------------------------------------------------- pills */
.pill{
  font-size:9px;font-weight:bold;letter-spacing:.9px;text-transform:uppercase;
  padding:3px var(--s2);border-radius:var(--r-pill);white-space:nowrap;
}
.pill.live{background:var(--ok-bg);color:var(--ok)}
.pill.soon{background:var(--warn-bg);color:var(--warn)}
.pill.dead{background:var(--stop-bg);color:var(--stop)}
.pill.new {background:var(--charcoal);color:var(--champagne)}
.pill.flat{background:var(--paper);color:var(--mut);border:1px solid var(--line)}

/* ----------------------------------------------------------- buttons */
.btn{
  font-family:inherit;font-size:12px;font-weight:bold;letter-spacing:1.4px;
  text-transform:uppercase;padding:14px var(--s4);min-height:48px;
  border:none;border-radius:var(--r);background:var(--gold);color:var(--charcoal);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  text-decoration:none;
}
.btn:hover{background:var(--gold-lt)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-block{width:100%}
.btn-2{
  font-family:inherit;font-size:10px;font-weight:bold;letter-spacing:.9px;text-transform:uppercase;
  padding:var(--s2) var(--s3);min-height:34px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--mut);
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
.btn-2:hover{border-color:var(--gold);color:var(--charcoal)}
.btn-2.danger:hover{border-color:var(--stop);color:var(--stop)}
.btn-ghost{
  font-family:inherit;font-size:9.5px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;
  padding:7px var(--s3);border:1px solid var(--gold);border-radius:var(--r-pill);
  background:transparent;color:var(--gold);cursor:pointer;
}
.btn-ghost:hover{background:var(--gold);color:var(--charcoal)}
.acts{margin-top:10px;display:flex;gap:7px;flex-wrap:wrap}

/* ------------------------------------------------------------- forms */
.field{margin-bottom:var(--s3)}
.field label{
  display:block;font-size:10px;font-weight:bold;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--mut);margin-bottom:var(--s1);
}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=number],select,textarea{
  width:100%;font-family:inherit;font-size:16px;   /* 16px stops iOS zooming on focus */
  padding:11px;min-height:44px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);
}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none;background:var(--white)}
textarea{min-height:96px;resize:vertical;line-height:1.6}
.hint{font-size:11.5px;color:var(--mut);margin-top:var(--s1);line-height:1.6}
.pair{display:flex;gap:10px}
.pair>*{flex:1;min-width:0}

/* ---------------------------------------------------------- messages */
.msg{padding:var(--s3) 14px;border-radius:var(--r-sm);margin-bottom:var(--s4);font-size:13px;line-height:1.6}
.msg.ok  {background:var(--ok-bg);  border-left:var(--rule) solid var(--ok)}
.msg.warn{background:var(--warn-bg);border-left:var(--rule) solid var(--warn)}
.msg.err {background:var(--stop-bg);border-left:var(--rule) solid var(--stop);color:var(--stop-ink)}

/* -------------------------------------------------------------- misc */
.code{
  font-family:var(--f-num);font-size:11.5px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:7px 9px;word-break:break-all;color:var(--charcoal);
}
.num{font-family:var(--f-num)}
.empty{padding:34px var(--s5);text-align:center;color:var(--mut);font-size:13px;line-height:1.7}
.foot{text-align:center;margin-top:18px;font-size:10.5px;letter-spacing:.6px;color:var(--mut)}
hr{border:none;border-top:1px solid var(--line);margin:var(--s5) 0}

table.grid{width:100%;border-collapse:collapse;font-size:13px}
table.grid th{
  text-align:left;font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:var(--mut);
  padding:10px var(--s3);border-bottom:1px solid var(--line);font-weight:bold;
}
table.grid td{padding:11px var(--s3);border-bottom:1px solid var(--line)}
table.grid tr:last-child td{border-bottom:none}
table.grid td.n{font-family:var(--f-num);text-align:right}

@media(max-width:600px){
  .wrap{padding:14px 10px 50px}
  .tiles{grid-template-columns:1fr 1fr}
  .pair{flex-direction:column;gap:0}
}
@media print{
  .acts,.btn,.btn-2{display:none}
  body{background:var(--white)}
  .card,.panel,.tile{border:1px solid #999;break-inside:avoid}
}