/* /css/app-learner.css — minimalist, rounded, brand-aware */
:root{
  --pri: var(--brand-primary, #1a73e8);
  --pri-600: color-mix(in oklab, var(--pri), #000 20%);
  --bg: #f7f7fb;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --border: #e5e7eb;
  --ok: #16a34a;
  --warn: #d97706;
  --err: #b91c1c;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
}

/* Layout shell */
html,body{height:100%}
body{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  margin:0; color:var(--text); background:var(--bg);
}
.container{max-width: min(1100px, 92vw); margin: 20px auto; padding: 0 16px;}
.header-brand{ display:flex; justify-content:center; align-items:center; margin: 10px 0 16px; }
.header-brand img{ height:42px; object-fit:contain; }

/* Cards, sections */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius: var(--radius); padding:16px; box-shadow: var(--shadow);
}

/* Headings + helper text */
h1,h2,h3{ color:var(--text); margin: 0 0 12px }
.muted{ color:var(--muted) }

/* Buttons */
.btn{
  -webkit-tap-highlight-color:transparent;
  background:var(--pri); color:#fff; border:0; border-radius: 999px;
  padding: 12px 18px; font-weight: 700; cursor:pointer; box-shadow: 0 4px 14px rgba(2,6,23,.12);
  transition: transform .05s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{ background: var(--pri-600) }
.btn:active{ transform: translateY(1px) }
.btn[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none }
.btn.ghost{ background:#fff; color:var(--text); border:1px solid var(--border) }
.btn.warn{ background: var(--warn) }
.btn.ok{ background: var(--ok) }
.btn.err{ background: var(--err) }
.btn.block{ width:100% }

/* Inputs */
input[type="text"],input[type="email"],input[type="tel"],input[type="date"],input[type="time"],
input[type="number"],select,textarea{
  width:100%; padding: 12px 14px; border:1px solid var(--border); border-radius: 12px;
  background:#fff; color:var(--text); outline: none;
}
input:focus,select:focus,textarea:focus{ border-color: var(--pri) }
input[type="checkbox"]{ width:18px; height:18px; accent-color: var(--pri) }

/* Responsive form + signature */
.card.stack { overflow: hidden; }         /* keep children inside rounded card */
.row > * { min-width: 0; }                /* allow flex items to shrink on small screens */

canvas#signaturePad{
  display:block;
  width:100%;           /* shrink to card width on mobile/tablet */
  height:auto;          /* keep aspect ratio */
  max-width:100%;
  border:1px solid var(--border);
  border-radius:12px;
}

.signature-preview{
  border:1px dashed var(--border);
  border-radius:12px;
  padding:16px;
  text-align:center;
  color:var(--muted);
  background:#fff;
  cursor:pointer;
  min-height:130px;        /* taller preview area */
  display:flex;
  align-items:center;
  justify-content:center;
  background-repeat:no-repeat;
  background-position:center;
}


/* Checkbox rows (for <label class="row">…</label>) */
.stack label.row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-wrap: nowrap;     /* keep the checkbox and first line together */
}

.stack label.row input[type="checkbox"]{
  flex:0 0 auto;
  width:1.25rem;
  height:1.25rem;
  margin-top:2px;
}

.stack label.row span{
  flex:1 1 auto;
  white-space:normal;
  line-height:1.4;
  min-width:0;
}

.stack label.row + label.row{ margin-top:12px; }






/* Tables */
.table{ width:100%; border-collapse: collapse; background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.table th,.table td{ text-align:left; padding:12px; border-bottom:1px solid var(--border) }
.table thead th{ background:#f8fafc; font-weight:700 }

/* Risk rating pills inside table cells */
.table td.low,
.table td.medium,
.table td.high{
  text-align:center;
  font-weight:700;
  border-left: none;
  border-right: none;
}

/* Colours with good contrast */
.table td.low{
  color:#065f46;               /* deep green text */
  background:#d4edda;          /* mint background */
}
.table td.medium{
  color:#92400e;               /* deep amber text */
  background:#fff3cd;          /* light amber background */
}
.table td.high{
  color:#991b1b;               /* deep red text */
  background:#f8d7da;          /* light red background */
}

/* Make the cells look like rounded badges */
.table td.low,
.table td.medium,
.table td.high{
  border-radius:5px;         /* pill */
  padding:8px 10px;            /* bigger target */
}

/* Include padding/border inside declared widths everywhere */
*, *::before, *::after { box-sizing: border-box; }

/* Prevent form controls from exceeding their containers */
input, select, textarea, button { max-width: 100%; }


/* Utility */
.stack{ display:grid; gap:12px }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.right{ margin-left:auto }
.brand{ display:flex; align-items:center; gap:12px; justify-content:center }
.top-nav{ display:flex; justify-content:flex-end; margin: 10px 0 }

/* Overlays common shape */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; }
.overlay>.panel{ background:#fff; border-radius: var(--radius); padding: 20px; width:min(520px, 92vw); box-shadow: var(--shadow) }

/* Make existing .btn from pages rounded consistently */
button.btn{ border-radius:999px !important }