/* ---------------------------------------------------------------------------
   AmForms - styling modelled on the reference Google Forms screenshots:
   a lilac page, white rounded cards, a purple accent bar and underline inputs.
--------------------------------------------------------------------------- */

:root {
  --purple:        #673ab7;
  --purple-dark:   #5b2ea6;
  --purple-light:  #f0ebf8;
  --ink:           #202124;
  --ink-muted:     #5f6368;
  --line:          #dadce0;
  --line-strong:   #bdc1c6;
  --danger:        #d93025;
  --success:       #188038;
  --card-radius:   8px;
  --shadow:        0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--purple-light);
  color: var(--ink);
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--purple); }

/* ------------------------------------------------------------- app chrome -- */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.topbar .brand .logo {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--purple);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.topbar nav { display: flex; gap: 4px; margin-left: 12px; flex-wrap: wrap; }
.topbar nav a {
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 500;
}
.topbar nav a:hover { background: #f1f3f4; color: var(--ink); }
.topbar nav a.active { background: var(--purple-light); color: var(--purple-dark); }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--ink-muted); font-size: 13px; text-align: right; }
.topbar .who strong { display: block; color: var(--ink); font-size: 14px; }

/* ---------------------------------------------------------------- layout -- */
.page { max-width: 770px; margin: 0 auto; padding: 24px 16px 72px; }
.page.wide { max-width: 1140px; }

/* ------------------------------------------------------------------ cards -- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: 24px;
  margin-bottom: 12px;
}
.card.focused { border-left: 6px solid #4285f4; padding-left: 18px; }

.form-header {
  border-top: 10px solid var(--purple);
  border-radius: var(--card-radius);
  padding: 24px;
}
.form-header h1 { margin: 0 0 8px; font-size: 32px; font-weight: 400; letter-spacing: -.2px; }
.form-header p { margin: 0; color: var(--ink-muted); font-size: 14px; }
.form-header .required-note { color: var(--danger); margin-top: 14px; font-size: 14px; }

/* ------------------------------------------------------------- questions -- */
.question label.q-title,
.question .q-title {
  display: block;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 18px;
}
.q-title .req { color: var(--danger); margin-left: 4px; }
/* A hint sitting under the question title pulls up into the title's 18px
   bottom margin. */
.q-help { display: block; color: var(--ink-muted); font-size: 12.5px; margin: -12px 0 14px; }

/* A hint sitting *after* the field instead needs ordinary spacing below it -
   the negative top margin above would drag it onto the input's underline. */
.q-input + .q-help { margin: 10px 0 0; }

/* No dead space before the age readout has anything to say. */
.q-help:empty { display: none; }

/* Underline input, the Google Forms "Short answer text" field. */
.q-input {
  width: 100%;
  max-width: 420px;
  border: none;
  border-bottom: 1px dotted var(--line-strong);
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  padding: 6px 0 8px;
  outline: none;
  transition: border-color .15s;
}
.q-input::placeholder { color: #9aa0a6; }
.q-input:hover { border-bottom-color: var(--ink-muted); }
.q-input:focus { border-bottom: 2px solid var(--purple); padding-bottom: 7px; }
.q-input.wide { max-width: 100%; }
textarea.q-input { border: 1px solid var(--line); border-radius: 4px; padding: 10px; max-width: 100%; resize: vertical; }
textarea.q-input:focus { border: 2px solid var(--purple); padding: 9px; }
input[type="date"].q-input { max-width: 240px; }

.q-input.has-error { border-bottom: 2px solid var(--danger); }
.field-error { display: block; color: var(--danger); font-size: 12.5px; margin-top: 8px; }

/* Radio options */
.options { display: flex; flex-direction: column; gap: 14px; }
.option { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; }
.option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  margin: 0;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color .15s;
}
.option:hover input[type="radio"] { border-color: var(--ink-muted); }
.option input[type="radio"]:checked { border-color: var(--purple); }
.option input[type="radio"]:checked::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--purple);
}
.option input[type="radio"]:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

/* ---------------------------------------------------------------- buttons -- */
.actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 4px;
  background: var(--purple);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .25px;
  padding: 10px 24px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
}
.btn:hover { background: var(--purple-dark); box-shadow: var(--shadow); }
.btn:disabled { background: var(--line-strong); cursor: not-allowed; box-shadow: none; }
.btn.block { width: 100%; justify-content: center; }
.btn.ghost { background: transparent; color: var(--purple); padding: 10px 14px; }
.btn.ghost:hover { background: var(--purple-light); box-shadow: none; }
.btn.outline { background: #fff; color: var(--purple); border: 1px solid var(--line); }
.btn.outline:hover { background: #f8f6fd; }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #b3261e; }
.btn.small { padding: 6px 14px; font-size: 13px; }

/* ------------------------------------------------------------------ login -- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.login-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 40px;
  box-shadow: var(--shadow);
}
.login-card .logo-lg {
  width: 52px; height: 52px;
  border-radius: 10px;
  background: var(--purple);
  color: #fff;
  display: grid; place-items: center;
  font-size: 24px; font-weight: 700;
  margin: 0 auto 18px;
}
.login-card h1 { font-size: 24px; font-weight: 400; text-align: center; margin: 0 0 6px; }
.login-card .sub { text-align: center; color: var(--ink-muted); margin: 0 0 28px; }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 13px; color: var(--ink-muted); margin-bottom: 6px; }
.field .q-input { max-width: 100%; }
.login-hint {
  margin-top: 24px;
  padding: 12px 14px;
  background: #f8f9fa;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.login-hint code { background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; }
.pw-wrap { position: relative; }
.pw-toggle {
  position: absolute; right: 0; top: 2px;
  background: none; border: none; cursor: pointer;
  color: var(--ink-muted); font-size: 12px; padding: 6px;
}

/* ---------------------------------------------------------------- alerts -- */
.alert {
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid transparent;
}
.alert.error   { background: #fce8e6; color: #a50e0e; border-color: #f5c6c2; }
.alert.success { background: #e6f4ea; color: #137333; border-color: #b7e1c1; }
.alert.info    { background: #e8f0fe; color: #1967d2; border-color: #c2d7fb; }

/* ----------------------------------------------------------------- table -- */
.toolbar {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.toolbar .search { display: flex; gap: 8px; flex: 1; min-width: 260px; }
.toolbar .search input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 9px 12px;
  font: inherit;
  outline: none;
  background: #fff;
}
.toolbar .search input:focus { border-color: var(--purple); }

.table-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th, table.data td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #eceff1; white-space: nowrap; }
table.data th {
  background: #f8f9fa;
  font-weight: 500;
  color: var(--ink-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
table.data tbody tr:hover { background: #faf8fe; }
table.data td.wrap { white-space: normal; min-width: 180px; }
.empty { padding: 56px 24px; text-align: center; color: var(--ink-muted); }
.empty .big { font-size: 40px; margin-bottom: 8px; }

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--purple-light);
  color: var(--purple-dark);
  font-size: 12px;
  font-weight: 500;
}
.row-actions { display: flex; gap: 6px; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; flex-wrap: wrap; }
.pager .links { display: flex; gap: 6px; }
.pager a, .pager span.cur {
  padding: 6px 12px; border-radius: 4px; text-decoration: none;
  border: 1px solid var(--line); color: var(--ink-muted); background: #fff;
}
.pager span.cur { background: var(--purple); border-color: var(--purple); color: #fff; }

/* ----------------------------------------------------------------- stats -- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; }
.stat .n { font-size: 28px; font-weight: 500; line-height: 1.2; }
.stat .l { color: var(--ink-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; }

/* ------------------------------------------------------------ detail view -- */
.detail dl { margin: 0; display: grid; grid-template-columns: 200px 1fr; gap: 0; }
.detail dt { color: var(--ink-muted); padding: 12px 0; border-bottom: 1px solid #eceff1; font-size: 13px; }
.detail dd { margin: 0; padding: 12px 0; border-bottom: 1px solid #eceff1; }

/* -------------------------------------------------------------- thank you -- */
.thanks h2 { font-size: 22px; font-weight: 400; margin: 0 0 10px; }
.thanks p { color: var(--ink-muted); margin: 0 0 20px; }

.footnote { text-align: center; color: var(--ink-muted); font-size: 12px; margin-top: 24px; }

@media (max-width: 640px) {
  .topbar { padding: 10px 14px; }
  .topbar .who { display: none; }
  .form-header h1 { font-size: 26px; }
  .card { padding: 20px 16px; }
  .detail dl { grid-template-columns: 1fr; }
  .detail dt { padding-bottom: 0; border-bottom: none; }
}

@media print {
  .topbar, .actions, .toolbar { display: none !important; }
  body { background: #fff; }
  .card { border: none; }
}

/* ===========================================================================
   Public form additions
   ======================================================================== */

body.public .page { padding-top: 32px; }

/* The honeypot. The markup already carries the `hidden` attribute, which every
   browser hides on its own, so this rule is belt and braces - it also keeps the
   field out of the layout if a future edit ever drops that attribute. */
.hp-field,
.hp-field[hidden] {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.captcha-card .captcha-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.captcha-img {
  display: block;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f4f1fb;
  width: 190px;
  height: 60px;
}
.captcha-question {
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 16px;
  padding: 12px 18px;
  background: var(--purple-light);
  border-radius: 6px;
  display: inline-block;
}

.privacy-note {
  color: var(--ink-muted);
  font-size: 12.5px;
  max-width: 560px;
  margin: 20px 0 0;
}

.login-back { text-align: center; margin: 20px 0 0; font-size: 13px; }

/* ===========================================================================
   Shared form / table bits
   ======================================================================== */

.select-input {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 9px 12px;
  font: inherit;
  background: #fff;
  color: var(--ink);
  max-width: 180px;
}
.select-input:focus { outline: none; border-color: var(--purple); }

.card-heading { font-weight: 400; margin: 0 0 20px; font-size: 20px; }
.field-legend { display: block; font-size: 13px; color: var(--ink-muted); margin-bottom: 8px; }
.table-card.spaced { margin-bottom: 16px; }
.push-right { margin-left: auto; }

.topbar nav a.external { color: var(--purple); }

.stat .n-sub { font-size: 18px; color: var(--ink-muted); font-weight: 400; }

table.data.compact th,
table.data.compact td { padding: 9px 14px; font-size: 13px; }
table.data .num,
table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ===========================================================================
   Charts
   --------------------------------------------------------------------------
   One series means one colour. Bar length is the encoding, so hue never
   varies by rank and no chart needs a legend.
   ======================================================================== */

:root {
  --chart-mark:    #673ab7;  /* form fills */
  --chart-blocked: #d03b3b;  /* rejected attempts */
  --chart-grid:    #e8e6ee;
  --chart-axis:    #c9c5d6;
  --chart-muted:   #6b6a75;
}

.chart-card { padding: 22px 24px 20px; }
.chart-title { font-size: 16px; font-weight: 500; margin: 0 0 4px; }
.chart-sub { color: var(--ink-muted); font-size: 12.5px; margin: 0 0 18px; }
.chart-title + .bars,
.chart-title + .chart-svg { margin-top: 16px; }
.chart-empty { color: var(--ink-muted); font-size: 13px; padding: 22px 0; margin: 0; }

.chart-grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 12px;
}

/* --- SVG column chart --- */
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-svg .chart-gridline { stroke: var(--chart-grid); stroke-width: 1; }
.chart-svg .chart-axis { stroke: var(--chart-axis); stroke-width: 1; }
.chart-svg .chart-tick { fill: var(--chart-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.chart-svg .chart-mark { fill: var(--chart-mark); transition: fill .12s; }
.chart-svg .chart-hit { fill: transparent; }
.chart-svg .chart-peak { fill: var(--ink); font-size: 11px; font-weight: 500; }
.chart-svg .chart-bar { cursor: default; }
.chart-svg .chart-bar:hover .chart-hit,
.chart-svg .chart-bar:focus-visible .chart-hit { fill: rgba(103, 58, 183, .07); }
.chart-svg .chart-bar:hover .chart-mark { fill: var(--purple-dark); }
.chart-svg .chart-bar:focus { outline: none; }
.chart-svg .chart-bar:focus-visible .chart-mark { fill: var(--purple-dark); }

/* --- HTML horizontal bars --- */
.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(96px, 42%) 1fr auto;
  align-items: center;
  gap: 12px;
}
.bar-label {
  font-size: 13px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-track {
  background: #f1eff7;
  border-radius: 4px;
  height: 14px;
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  min-width: 3px;
  background: var(--chart-mark);
  border-radius: 4px;
}
.bars.blocked .bar-track { background: #fbeceb; }
.bars.blocked .bar-fill { background: var(--chart-blocked); }
.bar-value {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.bar-share { color: var(--ink-muted); font-size: 11.5px; margin-left: 6px; }

/* --- the table twin every chart carries --- */
.chart-table { margin-top: 18px; border-top: 1px solid #eceff1; padding-top: 12px; }
.chart-table summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink-muted);
  list-style: none;
  user-select: none;
}
.chart-table summary::-webkit-details-marker { display: none; }
.chart-table summary::before { content: "▸  "; }
.chart-table[open] summary::before { content: "▾  "; }
.chart-table summary:hover { color: var(--purple); }
.chart-table table { margin-top: 12px; }
.chart-table .table-scroll { max-height: 320px; overflow: auto; }

@media (max-width: 560px) {
  .bar-row { grid-template-columns: minmax(80px, 40%) 1fr auto; gap: 8px; }
  .chart-card { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .chart-svg .chart-mark { transition: none; }
}

/* Bar widths as classes, so no page needs an inline style attribute
   and the CSP can stay strict. Generated 0-100 in whole percent. */
.bar-fill.w0 { width: 0%; }
.bar-fill.w1 { width: 1%; }
.bar-fill.w2 { width: 2%; }
.bar-fill.w3 { width: 3%; }
.bar-fill.w4 { width: 4%; }
.bar-fill.w5 { width: 5%; }
.bar-fill.w6 { width: 6%; }
.bar-fill.w7 { width: 7%; }
.bar-fill.w8 { width: 8%; }
.bar-fill.w9 { width: 9%; }
.bar-fill.w10 { width: 10%; }
.bar-fill.w11 { width: 11%; }
.bar-fill.w12 { width: 12%; }
.bar-fill.w13 { width: 13%; }
.bar-fill.w14 { width: 14%; }
.bar-fill.w15 { width: 15%; }
.bar-fill.w16 { width: 16%; }
.bar-fill.w17 { width: 17%; }
.bar-fill.w18 { width: 18%; }
.bar-fill.w19 { width: 19%; }
.bar-fill.w20 { width: 20%; }
.bar-fill.w21 { width: 21%; }
.bar-fill.w22 { width: 22%; }
.bar-fill.w23 { width: 23%; }
.bar-fill.w24 { width: 24%; }
.bar-fill.w25 { width: 25%; }
.bar-fill.w26 { width: 26%; }
.bar-fill.w27 { width: 27%; }
.bar-fill.w28 { width: 28%; }
.bar-fill.w29 { width: 29%; }
.bar-fill.w30 { width: 30%; }
.bar-fill.w31 { width: 31%; }
.bar-fill.w32 { width: 32%; }
.bar-fill.w33 { width: 33%; }
.bar-fill.w34 { width: 34%; }
.bar-fill.w35 { width: 35%; }
.bar-fill.w36 { width: 36%; }
.bar-fill.w37 { width: 37%; }
.bar-fill.w38 { width: 38%; }
.bar-fill.w39 { width: 39%; }
.bar-fill.w40 { width: 40%; }
.bar-fill.w41 { width: 41%; }
.bar-fill.w42 { width: 42%; }
.bar-fill.w43 { width: 43%; }
.bar-fill.w44 { width: 44%; }
.bar-fill.w45 { width: 45%; }
.bar-fill.w46 { width: 46%; }
.bar-fill.w47 { width: 47%; }
.bar-fill.w48 { width: 48%; }
.bar-fill.w49 { width: 49%; }
.bar-fill.w50 { width: 50%; }
.bar-fill.w51 { width: 51%; }
.bar-fill.w52 { width: 52%; }
.bar-fill.w53 { width: 53%; }
.bar-fill.w54 { width: 54%; }
.bar-fill.w55 { width: 55%; }
.bar-fill.w56 { width: 56%; }
.bar-fill.w57 { width: 57%; }
.bar-fill.w58 { width: 58%; }
.bar-fill.w59 { width: 59%; }
.bar-fill.w60 { width: 60%; }
.bar-fill.w61 { width: 61%; }
.bar-fill.w62 { width: 62%; }
.bar-fill.w63 { width: 63%; }
.bar-fill.w64 { width: 64%; }
.bar-fill.w65 { width: 65%; }
.bar-fill.w66 { width: 66%; }
.bar-fill.w67 { width: 67%; }
.bar-fill.w68 { width: 68%; }
.bar-fill.w69 { width: 69%; }
.bar-fill.w70 { width: 70%; }
.bar-fill.w71 { width: 71%; }
.bar-fill.w72 { width: 72%; }
.bar-fill.w73 { width: 73%; }
.bar-fill.w74 { width: 74%; }
.bar-fill.w75 { width: 75%; }
.bar-fill.w76 { width: 76%; }
.bar-fill.w77 { width: 77%; }
.bar-fill.w78 { width: 78%; }
.bar-fill.w79 { width: 79%; }
.bar-fill.w80 { width: 80%; }
.bar-fill.w81 { width: 81%; }
.bar-fill.w82 { width: 82%; }
.bar-fill.w83 { width: 83%; }
.bar-fill.w84 { width: 84%; }
.bar-fill.w85 { width: 85%; }
.bar-fill.w86 { width: 86%; }
.bar-fill.w87 { width: 87%; }
.bar-fill.w88 { width: 88%; }
.bar-fill.w89 { width: 89%; }
.bar-fill.w90 { width: 90%; }
.bar-fill.w91 { width: 91%; }
.bar-fill.w92 { width: 92%; }
.bar-fill.w93 { width: 93%; }
.bar-fill.w94 { width: 94%; }
.bar-fill.w95 { width: 95%; }
.bar-fill.w96 { width: 96%; }
.bar-fill.w97 { width: 97%; }
.bar-fill.w98 { width: 98%; }
.bar-fill.w99 { width: 99%; }
.bar-fill.w100 { width: 100%; }