/* giveaways.css - the Giveaways module's own styles (app/giveaways.js). The
   rest is the console's kit: system.css tokens, board.css's .lfd-page,
   .lfd-table and .lfb- panels, staff.html's .btn, .tag, .err, label and input.
   Every class here is .gw- prefixed and every colour is a token, so light,
   dark and every skin work without a rule here. */

/* the kit inside this view: paragraphs sit on the panel's own gap, and every
   control is a 34px target on a desktop (44px on a phone, below) */
#v-giveaways .lfb-panel p{margin:0}
#v-giveaways .btn{min-height:34px}
#v-giveaways .lfb-stamp{overflow-wrap:anywhere}
/* a write under way: the page dims until the answer is back */
#gwpage[aria-busy="true"]{opacity:.7;transition:opacity .15s ease}
@media (prefers-reduced-motion:reduce){#gwpage[aria-busy="true"]{transition:none}}

.gw-empty{font-size:13px;line-height:1.5;color:var(--ink2);overflow-wrap:anywhere}
.gw-said{color:var(--ink)}
.gw-hint{font-size:12px;line-height:1.45;margin:5px 0 0}
.gw-danger,.btn.ghost.gw-danger{color:var(--crit)}
.gw-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gw-why{margin-top:8px}

/* ------------------------------------------------------------- the status chip */
/* a status is a word on its hue's tint; the word always rides with it */
.gw-tag{margin:0;white-space:nowrap}
.gw-plain{background:var(--surface2);color:var(--ink2)}
.gw-good{background:color-mix(in srgb,var(--good) 14%,var(--surface));color:var(--good)}
.gw-warn{background:color-mix(in srgb,var(--warn) 14%,var(--surface));color:var(--warn)}
.gw-sky{background:color-mix(in srgb,var(--sky) 14%,var(--surface));color:var(--sky)}
.gw-violet{background:color-mix(in srgb,var(--violet) 14%,var(--surface));color:var(--violet)}

/* ------------------------------------------------------------- tables */
/* a table scrolls sideways inside its panel, never the page */
.gw-scroll{position:relative;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.gw-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* words read from the left; only figures (.n) keep the kit's right edge */
.gw-scroll .lfd-table th:not(.n),.gw-scroll .lfd-table td:not(.n){text-align:left}
.gw-scroll .lfd-table th,.gw-scroll .lfd-table td{vertical-align:middle}
.gw-scroll .lfd-table th{white-space:nowrap}
.gw-scroll .lfd-table th.n + th:not(.n),.gw-scroll .lfd-table td.n + td:not(.n){padding-left:22px}
.gw-scroll .lfd-table td:first-child{color:var(--ink)}
.gw-scroll .lfd-table td{padding-top:7px;padding-bottom:7px}
.lfd-table tr.gw-off td{color:var(--ink3)}
/* a prize or a display name is words, not a figure: it wraps inside its cell (the kit keeps a cell on one line) */
.gw-scroll .lfd-table td.gw-name,.gw-scroll .lfd-table td.gw-prize{white-space:normal;overflow-wrap:anywhere;font-family:var(--ui);letter-spacing:0;color:var(--ink)}
.gw-scroll .lfd-table td.gw-name{font-size:13.5px;min-width:160px}
.gw-scroll .lfd-table td.gw-prize{min-width:180px;max-width:440px}
.gw-sub{display:block;font:500 11px/1.4 var(--mono);color:var(--ink3);letter-spacing:.04em}

/* a prize that opens its giveaway: a plain button that reads as a link */
.gw-open{display:inline-flex;align-items:center;min-height:34px;margin:0;padding:0;border:0;border-radius:var(--r);background:transparent;
  color:var(--ink);font-family:var(--ui);font-size:13.5px;font-weight:600;letter-spacing:0;text-align:left;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;overflow-wrap:anywhere;touch-action:manipulation}
.gw-open:hover{text-decoration-color:var(--accent)}
.gw-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ------------------------------------------------------------- one giveaway */
.gw-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;align-items:start;margin-bottom:12px}
.gw-fact{min-width:0}
.gw-fact .lfb-kicker{margin-bottom:4px}
.gw-fact p{font-size:14px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.gw-wide{grid-column:1 / -1}
.gw-details{white-space:pre-wrap}
.gw-count{display:flex;align-items:baseline;gap:8px}
.gw-fig{font:600 26px/1.1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.gw-winner{font:600 22px/1.25 var(--display);color:var(--ink);overflow-wrap:anywhere;margin-bottom:4px}

/* ------------------------------------------------------------- the form */
.gw-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;align-items:start}
.gw-form > div{display:flex;flex-direction:column;min-width:0}
.gw-form > .gw-actions{flex-direction:row}
.gw-form label{margin:0 0 5px}
.gw-form input,.gw-form select,.gw-form textarea{margin:0}
.gw-form select{width:100%;min-height:42px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
.gw-form textarea{min-height:88px}
.gw-form p{margin:0}
.gw-form .err{margin:0}
.gw-form [aria-invalid="true"]{border-color:var(--crit)}
.gw-form input[type="datetime-local"]{min-height:42px}

/* the roles to pick from: a box of tick boxes that scrolls inside itself */
.gw-roles{min-width:0;margin:0;padding:10px 12px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.gw-roles legend{padding:0 6px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.gw-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 12px;max-height:220px;overflow:auto;margin-top:8px;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.gw-check{display:flex;align-items:center;gap:8px;min-height:34px;margin:0;cursor:pointer;
  font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);overflow-wrap:anywhere}
.gw-check input[type="checkbox"]{width:18px;height:18px;min-height:0;margin:0;padding:0;flex:0 0 auto;accent-color:var(--accent)}
.gw-check span{min-width:0}

/* ------------------------------------------------------------- phone */
@media (max-width:760px){
  #v-giveaways .btn,.gw-open,.gw-check{min-height:44px}
  .gw-facts,.gw-form{grid-template-columns:minmax(0,1fr)}
  .gw-form select,.gw-form input[type="datetime-local"]{min-height:44px}
  .gw-pick{grid-template-columns:minmax(0,1fr)}
  .gw-actions .btn{flex:1 1 auto}
}