/* Fresh Tasks — Fresh Digital brand: #17A8E3 blue, #FD2EB3 pink, Alata */
:root {
  --blue: #17A8E3; --blue-dark: #0E7FB0; --pink: #FD2EB3;
  --ink: #172733; --muted: #64798a; --bg: #f2f7fa; --card: #ffffff;
  --line: #dde8ef; --red: #e23a3a; --amber: #e8920c; --green: #1caf68;
  --radius: 12px; --shadow: 0 1px 3px rgba(23, 39, 51, .08);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Alata', -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px; line-height: 1.45;
}
a { color: var(--blue-dark); text-decoration: none; }
h1 { font-size: 26px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 10px; }
h2 small, h1 small { color: var(--muted); font-weight: 400; font-size: 12px; }
code { background: #eef4f8; padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 18px; }
.muted { color: var(--muted); } .small { font-size: 12.5px; }

/* ---- top bar ---- */
.top { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.bar { display: flex; align-items: center; gap: 18px; height: 56px; }
.brand { font-size: 20px; color: var(--ink); letter-spacing: .2px; }
.brand span { color: var(--blue); }
.brand.big { font-size: 30px; }
.mainnav { display: flex; gap: 4px; flex: 1; }
.navlink { padding: 6px 12px; border-radius: 8px; color: var(--ink); }
.navlink:hover { background: #eef6fb; }
.navlink.on { background: var(--blue); color: #fff; }
.rightnav { display: flex; align-items: center; gap: 10px; }
.bell { position: relative; font-size: 19px; text-decoration: none; }
.badge {
  position: absolute; top: -6px; right: -10px; background: var(--pink); color: #fff;
  font-size: 10.5px; border-radius: 999px; padding: 1px 5px; min-width: 17px; text-align: center;
}
.avatar, .mini-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff;
  font-size: 12.5px; flex: none;
}
.mini-avatar { width: 26px; height: 26px; font-size: 11px; }
.mini-avatar.none { background: #c3d2dc; }

/* ---- buttons / forms ---- */
.btn {
  display: inline-block; border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 7px 14px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 14px;
}
.btn:hover { border-color: var(--blue); color: var(--blue-dark); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-dark); }
.btn.new { background: var(--pink); border-color: var(--pink); color: #fff; }
.btn.new:hover { filter: brightness(.93); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--red); border-color: #f2c9c9; }
.btn.wide { width: 100%; }
.linkish { background: none; border: 0; color: var(--blue-dark); cursor: pointer; font: inherit; font-size: 12.5px; text-decoration: underline; padding: 0; }
input, select, textarea {
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(23, 168, 227, .35); border-color: var(--blue); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
label small { color: var(--muted); }

/* ---- cards / layout ---- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin: 14px 0; }
.card.slim { padding: 10px 18px; }
.pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0 10px; justify-content: space-between; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filters select, .filters input { padding: 5px 8px; font-size: 13px; }
.inline { display: inline; }
.flash { margin: 14px 0 0; padding: 10px 14px; border-radius: 9px; background: #e3f6ec; border: 1px solid #bce6d0; color: #14683e; }
.flash.err { background: #fdeaea; border-color: #f2c9c9; color: #8f1f1f; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.empty.small { padding: 12px 0; font-size: 13px; }

/* ---- quadrant groups ---- */
.qgroup { margin: 18px 0 22px; }
.qgroup h2 { display: flex; align-items: baseline; gap: 8px; padding-left: 10px; border-left: 4px solid var(--muted); }
.qgroup.q1 h2 { border-color: var(--red); }
.qgroup.q2 h2 { border-color: var(--blue); }
.qgroup.q3 h2 { border-color: var(--amber); }
.qgroup.q4 h2 { border-color: #9fb4c2; }

/* ---- task rows ---- */
.task {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 6px 0;
  box-shadow: var(--shadow);
}
.task.isdone .tasktitle { text-decoration: line-through; color: var(--muted); }
.tasklink { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink); min-width: 0; }
.tasktitle { font-size: 14.5px; margin-right: 4px; }
.taskmeta { display: flex; align-items: center; gap: 8px; flex: none; }
.tick { flex: none; display: flex; }
.tickbox {
  width: 21px; height: 21px; border-radius: 6px; border: 2px solid #b8ccd9; background: #fff;
  cursor: pointer; color: #fff; font-size: 13px; line-height: 1; padding: 0;
}
.tickbox:hover { border-color: var(--green); }
.tickbox.on { background: var(--green); border-color: var(--green); }
.chip {
  font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #eef4f8; color: var(--muted);
  white-space: nowrap;
}
.chip.client { background: #e2f3fc; color: var(--blue-dark); }
.chip.tag { background: #fdeaf6; color: #b3117c; }
.chip.blocked { background: #fdeaea; color: var(--red); }
.chip.progress { background: #fff3e0; color: var(--amber); }
.chip.quad.q1 { background: var(--red); color: #fff; }
.chip.quad.q2 { background: var(--blue); color: #fff; }
.chip.quad.q3 { background: var(--amber); color: #fff; }
.chip.quad.q4 { background: #9fb4c2; color: #fff; }
.due { font-size: 12px; color: var(--muted); white-space: nowrap; }
.due.overdue { color: #fff; background: var(--red); padding: 2px 8px; border-radius: 999px; }
.due.today { color: #fff; background: var(--amber); padding: 2px 8px; border-radius: 999px; }
.due.soon { color: var(--amber); }

/* ---- matrix ---- */
.axis-top { display: grid; grid-template-columns: 24px 1fr 1fr; gap: 12px; text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.matrix-wrap { display: grid; grid-template-columns: 24px 1fr; gap: 0 12px; }
.axis-left { display: grid; grid-template-rows: 1fr 1fr; }
.axis-left span { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; color: var(--muted); font-size: 12.5px; }
.matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cell { border-radius: var(--radius); padding: 12px; border: 1px solid var(--line); background: #fff; min-height: 130px; }
.cell h3 { margin: 0 0 8px; font-size: 14px; }
.cell.q1 { border-top: 4px solid var(--red); }
.cell.q2 { border-top: 4px solid var(--blue); }
.cell.q3 { border-top: 4px solid var(--amber); }
.cell.q4 { border-top: 4px solid #9fb4c2; }
.cell .task { padding: 6px 9px; }

/* ---- task page ---- */
.taskhead { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; margin-top: 22px; flex-wrap: wrap; }
.taskbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.chiprow { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.banner.blocked { background: #fdeaea; border: 1px solid #f2c9c9; color: #8f1f1f; padding: 10px 14px; border-radius: 9px; margin: 12px 0; }
.desc { margin: 0; white-space: pre-wrap; }
.comment { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.comment:first-of-type { border-top: 0; }
.comment p { margin: 3px 0 0; }
.mention { color: var(--pink); font-weight: 600; }
.commentform { display: flex; gap: 8px; margin-top: 10px; align-items: flex-start; }
.commentform textarea { flex: 1; }
.actline { padding: 3px 0; }
.dayhead { margin: 20px 0 6px; font-size: 14px; color: var(--muted); }

/* ---- forms ---- */
.form-card { max-width: 720px; margin: 24px auto; }
.taskform { display: flex; flex-direction: column; gap: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prio { border: 1px solid var(--line); border-radius: 9px; padding: 10px 14px; display: flex; gap: 26px; }
.prio legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
.check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
.formfoot { display: flex; gap: 10px; }
.inlineform { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---- tables / admin ---- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; color: var(--muted); font-size: 12px; font-weight: 400; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.table td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.rowbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.clientgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; margin-top: 8px; }
.clientrow { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 13.5px; border-bottom: 1px dashed var(--line); }
.clientrow.arch span { color: var(--muted); text-decoration: line-through; }

/* ---- notifications ---- */
.notif { display: block; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 9px 13px; margin: 6px 0; color: var(--ink); }
.notif.unread { border-left: 4px solid var(--pink); background: #fff8fc; }

/* ---- login ---- */
.login-bg {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0d3a52 0%, #17A8E3 60%, #FD2EB3 130%);
}
.login-card { background: #fff; border-radius: 16px; padding: 34px 36px; width: 340px; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.login-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.login-card .muted { margin: 4px 0 0; }

@media (max-width: 720px) {
  .grid2 { grid-template-columns: 1fr; }
  .matrix { grid-template-columns: 1fr; }
  .axis-top, .axis-left { display: none; }
  .matrix-wrap { grid-template-columns: 1fr; }
  .bar { gap: 8px; }
}

/* ---- quadrant dropdown ---- */
.quadselect { font-weight: 600; border-width: 2px; }
.quadselect.q1 { border-color: var(--red); color: var(--red); background: #fdeaea; }
.quadselect.q2 { border-color: var(--blue); color: var(--blue-dark); background: #f0faff; }
.quadselect.q3 { border-color: var(--amber); color: var(--amber); background: #fff9ef; }
.quadselect.q4 { border-color: #9fb4c2; color: var(--muted); background: #f4f7f9; }

/* ---- time tracking ---- */
.timerchip { display: flex; align-items: center; gap: 6px; background: #e8f8ef; border: 1px solid #bce6d0; border-radius: 999px; padding: 3px 10px; }
.timerchip a { color: #14683e; font-size: 13.5px; }
.stopbtn { background: var(--red); color: #fff; border: 0; border-radius: 50%; width: 20px; height: 20px; font-size: 9px; cursor: pointer; padding: 0; }
.timerrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.timerlive { font-size: 20px; color: var(--green); font-variant-numeric: tabular-nums; }
.table.slim td, .table.slim th { padding: 4px 8px; }
.statrow { display: flex; gap: 12px; flex-wrap: wrap; }
.stat { background: #f0faff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; display: flex; flex-direction: column; min-width: 110px; }
.stat strong { font-size: 20px; color: var(--blue-dark); }
.stat span { font-size: 12.5px; color: var(--muted); }
.sharebar { display: inline-block; height: 8px; background: var(--blue); border-radius: 4px; vertical-align: middle; max-width: 70%; min-width: 2px; }
@media (max-width: 720px) { }

/* ---- inline row priority ---- */
.rowquad { font-size: 11.5px; padding: 2px 4px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); max-width: 96px; cursor: pointer; }
.rowquad.q1 { border-color: var(--red); color: var(--red); background: #fdeaea; font-weight: 600; }
.rowquad.q2 { border-color: var(--blue); color: var(--blue-dark); background: #f0faff; }
.rowquad.q3 { border-color: var(--amber); color: var(--amber); background: #fff9ef; }
.rowquad.q4 { color: var(--muted); }
.entrylist { margin-top: 10px; }
.entrylist summary { cursor: pointer; }

/* ---- sticky save bar on the task form ---- */
.formfoot { position: sticky; bottom: 0; background: var(--card); padding: 12px 0; margin: 0 -4px; border-top: 1px solid var(--line); z-index: 5; }
.formfoot .btn.primary { flex: 1; text-align: center; font-size: 16px; padding: 12px; }
.formfoot .btn.primary:hover { background: var(--pink); border-color: var(--pink); }
@media (max-width: 720px) { .taskmeta .rowquad { max-width: 70px; } }

/* ---- dependency controls ---- */
.depbox { border: 1px solid var(--line); border-radius: 9px; padding: 10px 14px; }
.depbox legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
.deplist { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.depitem { flex-direction: row; align-items: center; gap: 8px; font-size: 13.5px; padding: 4px 2px; border-radius: 6px; cursor: pointer; }
.depitem:hover { background: #f0f7fb; }
.depitem em { color: var(--muted); font-style: normal; font-size: 12px; }
.deprow { display: flex; align-items: center; gap: 8px; }
.deprow .task { flex: 1; }

/* ---- review + attachments ---- */
.chip.review { background: #f1e6ff; color: #7a2ee8; }
.chip.review.big { font-size: 13px; padding: 6px 12px; align-self: center; }
.btn.review { background: #7a2ee8; border-color: #7a2ee8; color: #fff; }
.btn.review:hover { filter: brightness(.92); color: #fff; }
.attgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.att { margin: 0; }
.att img, .att video { width: 100%; max-height: 180px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); background: #000; }
.att img { background: #f4f7f9; }
.attdoc { display: block; padding: 24px 12px; text-align: center; border: 1px dashed var(--line); border-radius: 9px; }
.att figcaption { margin-top: 3px; }

/* ---- snooze ---- */
.snz { font-size: 12px; padding: 2px 4px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: #fff; max-width: 52px; cursor: pointer; }
.snz.wide { max-width: 140px; padding: 6px 8px; font-size: 13px; }
.snoozeform { display: flex; gap: 6px; align-items: center; }

/* ---- bell dropdown ---- */
.belldd { position: relative; }
.belldd summary { list-style: none; cursor: pointer; }
.belldd summary::-webkit-details-marker { display: none; }
.ddpanel {
  position: absolute; right: -40px; top: 34px; width: 340px; max-width: 90vw; z-index: 100;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgba(23,39,51,.18);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.ddnotif { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-size: 13px; }
.ddnotif:hover { background: #f0f7fb; }
.ddnotif.unread { border-left: 3px solid var(--pink); background: #fff8fc; }
.ddfoot { display: flex; justify-content: space-between; padding: 8px 10px 4px; border-top: 1px solid var(--line); margin-top: 4px; }

/* ---- Fresh Digital brand logo ---- */
.brand { display: flex; align-items: center; gap: 8px; }
.brandlogo { height: 34px; width: auto; display: block; }
.brandlogo.login { height: 52px; margin: 0 auto; }
.brandtasks { font-size: 15px; color: var(--blue); letter-spacing: 2.5px; text-transform: uppercase; margin-top: 6px; }
.brandtasks.big { text-align: center; font-size: 18px; margin-top: 8px; }
.login-card .brand.big { flex-direction: column; }

/* ==================== V2: quick add, menu, board, repeats ==================== */
.quickadd { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; margin: 4px 0 14px; }
.qarow1 { display: flex; gap: 8px; align-items: stretch; }
.fieldwrap { position: relative; display: flex; }
.fieldwrap.grow { flex: 1; }
.fieldwrap > input, .fieldwrap > textarea { width: 100%; padding-right: 44px; }
.fieldwrap .micbtn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin: 0; padding: 4px 7px; }
.fieldwrap:has(textarea) .micbtn { top: 10px; transform: none; }
.fieldwrap .micbtn span { display: none; }
.qatitle { font-size: 15px; }
.qaadd { flex: none; font-size: 15px; padding: 9px 18px; }
.qahint code { font-size: 11.5px; }
.qaopts { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; border-top: 1px dashed var(--line); padding-top: 10px; }
.qaopts select { font-size: 12.5px; padding: 5px 6px; max-width: 170px; }
.qfield { display: flex; flex-direction: column; gap: 3px; }
.qfield > span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.menucard { display: flex; flex-direction: column; padding: 6px; }
.menuitem { display: flex; flex-direction: column; gap: 1px; padding: 14px 14px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 16px; border-radius: 8px; }
.menuitem:last-child { border-bottom: 0; }
.menuitem:hover { background: #f0f7fb; }
.linkish.big { font-size: 16px; text-decoration: none; color: var(--red); text-align: left; }
.chip.warn { background: #fff3e0; color: #b06e00; }
.chip.ok { background: #e3f6ec; color: #14683e; }
.chip.paused { background: #eef4f8; color: var(--muted); }
.repeatrow .tasklink { flex-direction: column; align-items: flex-start; gap: 2px; }
.backlink { display: none; }
#toast[hidden] { display: none; }
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; background: var(--ink); color: #fff; border-radius: 999px; padding: 10px 18px; font-size: 14px; z-index: 300; display: flex; gap: 14px; align-items: center; box-shadow: 0 6px 24px rgba(0,0,0,.3); }
#toast button { background: none; border: 0; color: #7fd4ff; font: inherit; cursor: pointer; text-decoration: underline; }
.filterwrap > summary { display: none; }

/* ==================== V2: mobile app shell ==================== */
.tabbar { display: none; }
@media (max-width: 720px) {
  :root { --tabbar-h: calc(58px + env(safe-area-inset-bottom)); }
  body.has-tabbar { padding-bottom: var(--tabbar-h); }
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: #fff; border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom); height: var(--tabbar-h);
  }
  .tabitem { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 10.5px; position: relative; padding-top: 6px; }
  .tabitem svg { width: 24px; height: 24px; }
  .tabitem.on { color: var(--blue-dark); }
  .tab-new .plus { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--pink); color: #fff; margin-top: -22px; box-shadow: 0 4px 12px rgba(253, 46, 179, .4); }
  .tab-new .plus svg { width: 24px; height: 24px; }
  .tbadge { position: absolute; top: 2px; right: 50%; margin-right: -20px; background: var(--pink); color: #fff; font-size: 9.5px; border-radius: 999px; padding: 1px 5px; min-width: 15px; text-align: center; }
  body:has(.qatitle:focus) .tabbar { display: none; }

  /* hide desktop chrome */
  .mainnav, .rightnav .btn.new, .rightnav .belldd { display: none; }
  .bar { justify-content: space-between; }

  /* back link on detail/form pages (standalone PWAs lose browser chrome) */
  .backlink { display: inline-block; margin: 10px 0 -6px; font-size: 15px; color: var(--blue-dark); }

  /* inputs: 16px kills iOS focus zoom; bigger touch targets */
  input, select, textarea, .qatitle { font-size: 16px !important; }
  .btn { padding: 10px 16px; }
  .btn.small { padding: 8px 12px; font-size: 14px; }
  .tickbox { width: 26px; height: 26px; }
  .navlink, .menuitem { min-height: 44px; }

  /* task rows restack: tick | title / meta */
  .task { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 10px; padding: 10px 12px; }
  .task .tick { grid-row: 1 / span 2; align-self: center; }
  .tasklink { grid-column: 2; }
  .tasktitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .taskmeta { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .taskmeta .mini-avatar { display: inline-flex; width: 22px; height: 22px; }
  .chip.tag { display: none; }

  /* collapsible filters */
  .filterwrap > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 14px; color: var(--blue-dark); padding: 6px 0; }
  .filterwrap > summary::-webkit-details-marker { display: none; }
  .filterwrap:not([open]) .filters { display: none; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters select, .filters input { width: 100%; }

  /* quick add opts wrap; sticky save clears tab bar */
  .qaopts select { flex: 1 1 40%; max-width: none; }
  .formfoot { bottom: var(--tabbar-h); }
  .pagehead { margin-top: 14px; }
  h1 { font-size: 22px; }
  .ddpanel { right: -80px; }
  .statrow { gap: 8px; }
  .attgrid { grid-template-columns: 1fr 1fr; }
  .snoozeform input[type="date"] { max-width: 130px; }
  #toast { bottom: calc(var(--tabbar-h) + 12px); }
}

/* ---- super admin badge ---- */
.chip.super { background: #172733; color: #ffd76d; font-size: 10.5px; vertical-align: middle; }

/* ---- searchable client combobox ---- */
.combo { position: relative; width: 100%; min-width: 170px; }
.combo-input { width: 100%; }
.combo-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 150;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(23,39,51,.18); max-height: 240px; overflow-y: auto; padding: 4px;
}
.combo-list[hidden] { display: none; }
.combo-item { padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.combo-item:hover, .combo-item.hl { background: #e2f3fc; }
.combo-group { padding: 6px 10px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.taskform .combo { max-width: none; }

/* ---- quick add details ---- */
.qamore { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.qamore[hidden] { display: none; }
.qamore textarea { width: 100%; }
.qafile { font-size: 12.5px; color: var(--muted); flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) { .combo { max-width: none; } }

/* ---- named reviewer ---- */
.reviewform { display: flex; gap: 6px; align-items: center; }
.reviewform select { font-size: 13px; padding: 6px 8px; }

/* ---- team tasks ---- */
.chip.team { background: #e8e9ff; color: #4249c4; }
.banner.team { background: #eef0ff; border: 1px solid #ccd0f5; color: #333a8f; padding: 10px 14px; border-radius: 9px; margin: 12px 0; }
.teambox { border: 1px dashed #ccd0f5; border-radius: 9px; padding: 10px 14px; background: #fbfbff; }
.teambox legend { font-size: 13px; color: #4249c4; padding: 0 6px; }
.teamrow { display: flex; gap: 8px; margin: 6px 0; }
.teamrow select { min-width: 130px; }
.teamrow input { flex: 1; }
select.qaprio { max-width: none !important; width: auto; }
#qateamhint { padding: 2px 4px 0; color: #4249c4; }

/* ---- quick due presets ---- */
.duequick { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.duebtn { font-size: 11.5px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; font-family: inherit; }
.duebtn:hover { border-color: var(--blue); color: var(--blue-dark); }
.duebtn.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.duequick input[type="date"] { padding: 4px 6px; font-size: 12.5px; max-width: 150px; }
@media (max-width: 720px) { .duequick { flex-basis: 100%; } }

/* ---- voice dictation ---- */
.micbtn {
  align-self: flex-start; margin-top: 3px; font: inherit; font-size: 12px;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 999px; padding: 3px 10px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center;
}
.micbtn:hover { border-color: var(--blue); color: var(--blue-dark); }
.micbtn.rec { background: var(--red); border-color: var(--red); color: #fff; animation: micpulse 1.2s infinite; }
@keyframes micpulse { 50% { box-shadow: 0 0 0 6px rgba(226, 58, 58, .18); } }
.quickadd .micbtn { align-self: flex-start; }

/* combo inside a column qfield: flex-basis would become HEIGHT — neutralise it */
.qfield .combo { width: 210px; max-width: 100%; }

/* ---- single/team mode tabs ---- */
.modetabs { display: flex; gap: 8px; margin: -4px 0 14px; }
.modetab { flex: 1; padding: 11px; font: inherit; font-size: 15px; border: 2px solid var(--line); background: #fff; border-radius: 10px; cursor: pointer; color: var(--muted); }
.modetab.on { border-color: var(--blue); color: var(--blue-dark); background: #f0faff; font-weight: 600; }
.team-only { display: none; }
.teamrow .check { min-width: 110px; }

/* ---- tidy + rich descriptions ---- */
.tidybtn { color: #7a2ee8; border-color: #d9c6f7; }
.fieldwrap .tidybtn { right: 40px; }
.fieldwrap .tidybtn span { display: none; }
.dhead { font-weight: 600; font-size: 16px; display: inline-block; margin-top: 6px; }
.dbullet { display: inline-block; padding-left: 10px; }

/* ==================== form v3: chips, prio buttons, dep modal ==================== */
.memchips { display: flex; gap: 8px; flex-wrap: wrap; }
.memchip { font: inherit; font-size: 14.5px; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.memchip:hover { border-color: var(--mc); }
.memchip.on { background: var(--mc); border-color: var(--mc); color: var(--mcfg, #fff); font-weight: 600; }
.teamkind { display: flex; gap: 8px; }
.kindbtn { flex: 1; font: inherit; font-size: 13.5px; padding: 9px 12px; border-radius: 9px; border: 2px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; }
.kindbtn.on { border-color: #4249c4; color: #4249c4; background: #eef0ff; font-weight: 600; }
.teambox { display: flex; flex-direction: column; gap: 12px; }
.priogroup { display: flex; gap: 6px; flex-wrap: wrap; }
.priobtn { font: inherit; font-size: 13.5px; padding: 9px 16px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; }
.priobtn.q1.on { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.priobtn.q2.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.priobtn.q3.on { background: var(--amber); border-color: var(--amber); color: #fff; font-weight: 600; }
.priobtn.q4.on { background: #9fb4c2; border-color: #9fb4c2; color: #fff; font-weight: 600; }
.priobtn.q1:hover { border-color: var(--red); } .priobtn.q2:hover { border-color: var(--blue); }
.priobtn.q3:hover { border-color: var(--amber); } .priobtn.q4:hover { border-color: #9fb4c2; }
.qflabel { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.biginput { font-size: 16px; padding: 11px 44px 11px 12px; }
.depqueue { display: flex; gap: 6px; flex-wrap: wrap; }
.depqueue:empty { display: none; }
.depchip { cursor: pointer; }
.modal { position: fixed; inset: 0; background: rgba(23, 39, 51, .55); z-index: 400; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-card { background: #fff; border-radius: 14px; padding: 22px; width: 540px; max-width: 100%; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.modal-card h2 { margin: 0; }
.modalfoot { display: flex; gap: 10px; }
.modalfoot .btn.primary { flex: 1; }
.schedrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.schedrow select, .schedrow input { max-width: 190px; }
.schedrow input[type="number"] { width: 80px; }
.teamrow[hidden] { display: none; }

/* ---- feedback capture ---- */
.commentside { display: flex; flex-direction: column; gap: 6px; }
.fbcheck { font-size: 12px; color: var(--muted); max-width: 160px; }

/* ---- multi-part team rows ---- */
.partlist { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.addpart { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); background: #fff; color: var(--blue-dark); font-size: 17px; cursor: pointer; align-self: flex-start; line-height: 1; }
.addpart:hover { border-color: var(--blue); background: #f0faff; }
.teamrow { align-items: flex-start; }
.teamrow .mini-avatar { margin-top: 5px; }
.duetime { display: flex; gap: 6px; }
.duetime input[type="time"], .duequick input[type="time"] { max-width: 110px; padding: 4px 6px; font-size: 12.5px; }
.cfile { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; padding: 8px 14px; border: 2px dashed var(--line); border-radius: 999px; color: var(--ink); background: #fff; }
.cfile:hover { border-color: var(--blue); color: var(--blue); background: #f4fbfe; }
.cfile.has { border-style: solid; border-color: var(--green, #1CAF68); color: #116b3d; background: #eefaf3; }
.cfile .cfilecount { font-weight: 500; font-size: 12px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cattrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.cattthumb { max-height: 90px; border-radius: 8px; border: 1px solid var(--line); }

/* ---- clearer quick-add option rows: top-aligned captions, uniform control heights ----
   The caption rule MUST stay scoped to :first-child — .duequick/.cbquick are also direct
   span children, and forcing them to 15px squashed the pill rows so they spilled out of
   the card over the content below (the mobile bug Mitch screenshotted, 30 Jul). */
.qaopts { align-items: flex-start !important; gap: 12px 18px; }
.qaopts .qfield > span:first-child { display: flex; align-items: center; min-height: 18px; line-height: 18px; }
.qaopts .qfield > .duequick, .qaopts .qfield > .cbquick { height: auto; line-height: normal; }
.qaopts select, .qaopts input, .qaopts .combo-input, .qaopts .duebtn { min-height: 34px; }
.qaopts .duebtn { min-height: 34px; padding-top: 0; padding-bottom: 0; }
.tsel { display: inline-flex; align-items: center; gap: 2px; }
.tsel select { min-height: 34px; padding: 4px 4px; font-size: 12.5px; }
.tcolon { color: var(--muted); }
.duetime { align-items: center; }

/* ---- bin + branded confirm ---- */
.binbtn { background: none; border: 0; cursor: pointer; font-size: 15px; opacity: .35; padding: 2px 4px; }
.binbtn:hover { opacity: 1; }
.modal-card.slim { width: 420px; gap: 8px; }
#confirmmsg { margin: 0; color: var(--muted); }
.cbquick { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.cbquick input[type="date"] { padding: 4px 6px; font-size: 12.5px; max-width: 150px; min-height: 34px; }

/* ---- task rows: title on top (max 2 lines), controls underneath — all screen sizes ---- */
.task { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 5px 12px; align-items: start; }
.task .tick { grid-row: 1 / span 2; align-self: center; }
.tasklink { grid-column: 2; }
.tasktitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; }
.taskmeta { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; row-gap: 6px; }
.cell .task { padding: 8px 10px; }
.remindrow { display: flex; gap: 10px; align-items: center; padding: 4px 0; font-size: 13.5px; }
hr.soft { border: 0; border-top: 1px solid var(--line); margin: 14px 0 10px; }

/* ---- numbered form steps (Mitch, 30 Jul: "number each thing so it's clear where to go first") ---- */
.stepn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--blue); color: #fff;
  font-size: 11px; font-style: normal; flex: none; margin-right: 6px;
}
.stepcap { display: flex; align-items: center; font-size: 12.5px; color: var(--muted); margin-bottom: -2px; }
.stepcap em { font-style: normal; margin-left: 4px; }
.lcap { display: flex; align-items: center; }
.qaopts .qfield > span:first-child .stepn, .qafile .stepn { width: 16px; height: 16px; font-size: 10px; }
.qafile .stepn { margin-right: 4px; }
.qflabel > span .stepn { vertical-align: -4px; }

/* ---- mobile clarity pass (thin 320px phones up to wide 430px phones) ---- */
@media (max-width: 720px) {
  /* safety net: one overflowing element must never let the whole page pan sideways */
  html, body { overflow-x: hidden; }

  /* option fields stack full-width: one clear row per control, easy to read + tap.
     Scoped to DIRECT children of .qfield — the little hour/minute selects nested
     inside the Due row must keep their natural width or "Time" gets clipped. */
  .qaopts { flex-direction: column; align-items: stretch !important; gap: 14px; }
  .qaopts .qfield { width: 100%; }
  .qaopts .qfield > select, select.qaprio { width: 100% !important; max-width: none; }
  .tsel select { width: auto !important; min-width: max-content; padding: 4px 8px; }
  .duetime { flex-wrap: wrap; }
  .duetime input[type="date"] { flex: 1 1 100%; max-width: none; min-height: 44px; }
  .qfield .combo { width: 100%; }

  /* pills: bigger tap targets, roomier spacing */
  .duequick, .cbquick { gap: 6px; }
  .duequick .duebtn, .cbquick .duebtn { min-height: 38px; padding: 0 12px; }
  .duequick input[type="date"], .cbquick input[type="date"] { min-height: 38px; max-width: 210px; flex: 1 1 auto; }
  .tsel select { min-height: 38px; }

  /* row controls: stop "Do First" truncating to "Do Firs…" */
  .taskmeta .rowquad { max-width: 142px; }
  .snz { min-height: 30px; }
  .binbtn { padding: 6px 8px; }
}

/* ---- quick-add submit placement: top-right on desktop, full-width bottom on mobile ---- */
.qaadd-bottom { display: none; }
@media (max-width: 720px) {
  .qarow1 .qaadd { display: none; }
  .qaadd-bottom { display: block; width: 100%; min-height: 48px; font-size: 16px; margin-top: 2px; }
}

/* ---- row avatar reassign button ---- */
.rowassign { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; border-radius: 50%; }
.rowassign:hover .mini-avatar, .rowassign:focus-visible .mini-avatar { outline: 2px solid var(--blue); outline-offset: 1px; }

/* ---- thin-device sweep (Mitch, 30 Jul: "full check on each page, everything readable fully") ---- */
@media (max-width: 720px) {
  /* task page snooze row: "⏰ Come back…" was clipped by the 140px cap at the 16px mobile font */
  .snoozeform { flex-wrap: wrap; }
  .snoozeform .snz.wide { max-width: none; flex: 1 1 100%; min-height: 44px; }
  .snoozeform input[type="date"] { flex: 1 1 auto; max-width: none; min-height: 44px; }
  .snoozeform .btn { min-height: 44px; }

  /* comment box: textarea and button stack instead of squeezing side by side */
  .commentform { flex-direction: column; }
  .commentform textarea { width: 100%; }
  .commentside { width: 100%; }
  .fbcheck { max-width: none; }

  /* reviewer picker and other control rows wrap instead of clipping */
  .reviewform { flex-wrap: wrap; }
  .taskbtns .btn { min-height: 44px; }

  /* admin/time tables scroll inside themselves rather than stretching the page */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* repeat-form schedule controls: full-ish width, nothing clipped */
  .schedrow select, .schedrow input { max-width: none; flex: 1 1 45%; }
  .schedrow input[type="number"] { flex: 0 1 90px; }

  /* row snooze ⏰ needs a touch more room at the 16px font */
  .snz { max-width: 64px; min-height: 30px; }
}

/* ---- notifications page: actions can never be missed on a phone ---- */
@media (max-width: 720px) {
  .pageactions { flex-direction: row !important; width: 100%; }
  .pageactions form { flex: 1; }
  .pageactions .btn { width: 100%; min-height: 44px; }
}

/* ---- training ---- */
.traincat { margin: 22px 0 6px; padding-left: 10px; border-left: 4px solid var(--pink); }
.trainsub { margin: 14px 0 4px; font-size: 14px; color: var(--muted); font-weight: 400; }
.trainrow { color: var(--ink); }
.trainicon { font-size: 20px; align-self: center; }
.trainframe { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; margin: 14px 0; box-shadow: var(--shadow); }
/* 78vh is only the pre-JS fallback — the module reports its height and the iframe grows
   to fit, so the page scrolls as one document (no nested scroll, which is what broke mobile). */
.trainframe iframe { width: 100%; height: 78vh; border: 0; display: block; }
@media (max-width: 720px) {
  .trainframe { margin: 10px -6px; border-radius: 10px; }
  .trainframe iframe { height: 70vh; }
}

/* ---- today / bands / waiting / completion chips ---- */
.band { margin: 16px 0; }
.band > h2 { display: flex; align-items: baseline; gap: 8px; padding-left: 10px; border-left: 4px solid var(--line); }
.band.b-over > h2 { border-color: var(--red); }
.band.b-today > h2 { border-color: var(--amber); }
.band.b-doing > h2 { border-color: var(--blue); }
.band.b-review > h2 { border-color: #7a2ee8; }
details.band > summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 8px 0; }
.chip.waiting { background: #fff3e0; color: #b06e00; }
.timechips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; }
.timechip { font-size: 14px; padding: 10px 16px; }
.navlink.rq { color: #7a2ee8; }
.badge.inline { position: static; margin-left: 4px; background: #7a2ee8; }
.overdueline { margin: 4px 0 10px; font-size: 13.5px; color: var(--red); }
.clearbar { display: flex; gap: 10px; align-items: center; margin: 6px 0 10px; }
#clearword { font-family: ui-monospace, monospace; letter-spacing: 1px; }

/* ---- user menu under the avatar ---- */
.userdd { position: relative; }
.userdd > summary { list-style: none; cursor: pointer; }
.userdd > summary::-webkit-details-marker { display: none; }
.usermenu { right: 0; width: 250px; }
.ddwho { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.usermenu .ddnotif { display: flex; align-items: center; gap: 8px; }
.usermenu .ddfoot { justify-content: flex-start; }

/* ==================== My Day ==================== */
.capbar { position: relative; height: 30px; background: #e6eef4; border-radius: 999px; overflow: hidden; margin: 6px 0 16px; }
.capfill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--blue), #5ec8f5); transition: width .4s ease; }
.capfill.over { background: linear-gradient(90deg, var(--amber), var(--red)); }
.capnote { position: relative; z-index: 1; display: block; line-height: 30px; padding: 0 14px; font-size: 12.5px; color: var(--ink); }
.capnote .red { color: var(--red); }
.dayplan { display: flex; flex-direction: column; gap: 6px; }
.dayblock { display: flex; gap: 12px; align-items: stretch; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); position: relative; }
.dayblock .daytime { flex: none; width: 46px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.daybody { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.daytitle { font-size: 15px; color: var(--ink); flex: 1 1 220px; min-width: 0; }
.daymeta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dayblock.task { border-left: 4px solid var(--line); cursor: grab; }
.dayblock.task.q1 { border-left-color: var(--red); }
.dayblock.task.q2 { border-left-color: var(--blue); }
.dayblock.task.q3 { border-left-color: var(--amber); }
.dayblock.task.q4 { border-left-color: #9fb4c2; }
.dayblock.task.dragging { opacity: .4; }
.dayblock.task.dragover { border-top: 3px solid var(--pink); }
.dayblock.lunch { background: #fff8e9; border-color: #f2e0b8; border-left: 4px solid var(--amber); }
.dayblock.lunch .daybody { flex-direction: column; align-items: flex-start; gap: 2px; }
.dayblock.gap { background: transparent; border-style: dashed; box-shadow: none; }
.draghandle { color: #c3d2dc; cursor: grab; font-size: 15px; flex: none; }
.estsel { font-size: 12px; padding: 3px 6px; border-radius: 999px; max-width: 108px; }
.dayfoot { margin-top: 14px; }
@media (max-width: 720px) {
  .dayblock { padding: 10px; gap: 8px; }
  .dayblock .daytime { width: 40px; font-size: 11.5px; }
  .daytitle { flex-basis: 100%; }
  .draghandle { display: none; }
}
.daynav { gap: 6px; }
.dayblock.gap { min-height: 0 !important; padding: 4px 14px; }

/* ==================== My Day — six looks ==================== */
.stylepick { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.stylebtn { font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); }
.stylebtn:hover { border-color: var(--blue); color: var(--blue-dark); }
.stylebtn.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.dayplan .axis { display: none; }

/* — 1. Timeline bars: a Gantt row per task on a shared time axis — */
.dayplan.s1 { position: relative; padding-top: 24px; gap: 4px; }
.dayplan.s1 .axis { display: block; position: relative; height: 20px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.dayplan.s1 .axis .tick { position: absolute; transform: translateX(-50%); font-size: 10.5px; color: var(--muted); }
.dayplan.s1 .axis .tick::after { content: ''; position: absolute; left: 50%; top: 15px; width: 1px; height: 6px; background: var(--line); }
.dayplan.s1 .dayblock { position: relative; min-height: 0 !important; height: 42px; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.dayplan.s1 .dayblock .daytime { display: none; }
.dayplan.s1 .daybody { position: absolute; left: var(--l); width: var(--w); min-width: 74px; height: 38px;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 8px;
  padding: 0 10px; gap: 6px; overflow: hidden; box-shadow: var(--shadow); flex-wrap: nowrap; }
.dayplan.s1 .dayblock.q1 .daybody { border-left-color: var(--red); }
.dayplan.s1 .dayblock.q3 .daybody { border-left-color: var(--amber); }
.dayplan.s1 .dayblock.q4 .daybody { border-left-color: #9fb4c2; }
.dayplan.s1 .daytitle { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.dayplan.s1 .daymeta { flex: none; }
.dayplan.s1 .daymeta .chip, .dayplan.s1 .daymeta .due { display: none; }
.dayplan.s1 .estsel { max-width: 78px; font-size: 11px; }
.dayplan.s1 .dayblock.lunch .daybody { background: #fff8e9; border-left-color: var(--amber); }
.dayplan.s1 .dayblock.gap { display: none; }

/* — 6. Centre rail: alternating cards down a spine — */
.dayplan.s6 { position: relative; padding: 8px 0; }
.dayplan.s6::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--line); }
.dayplan.s6 .axis { display: none; }
.dayplan.s6 .dayblock { width: calc(50% - 26px); position: relative; }
.dayplan.s6 .dayblock:nth-child(odd) { margin-right: auto; }
.dayplan.s6 .dayblock:nth-child(even) { margin-left: auto; }
.dayplan.s6 .dayblock::after { content: ''; position: absolute; top: 18px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--blue); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.dayplan.s6 .dayblock:nth-child(odd)::after { right: -32px; }
.dayplan.s6 .dayblock:nth-child(even)::after { left: -32px; }
.dayplan.s6 .dayblock.q1::after { background: var(--red); }
.dayplan.s6 .dayblock.gap { display: none; }
@media (max-width: 720px) {
  .dayplan.s6::before { left: 14px; }
  .dayplan.s6 .dayblock { width: calc(100% - 30px); margin-left: auto !important; }
  .dayplan.s6 .dayblock::after { left: -22px !important; right: auto !important; }
  .dayplan.s1 .daybody { min-width: 56px; }
  .dayplan.s4 .daytitle { font-size: 10px; }
}

/* Horizontal looks need width — on phones they fall back to the agenda layout. */
@media (max-width: 760px) {
  .dayplan.s1, .dayplan.s4 { display: flex; flex-direction: column; gap: 6px; padding-top: 0; position: static; }
  .dayplan.s1 .axis, .dayplan.s4 .axis { display: none; }
  .dayplan.s1 .dayblock, .dayplan.s4 .dayblock {
    position: static; width: auto; height: auto; min-height: 46px !important;
    background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); }
  .dayplan.s1 .dayblock .daytime, .dayplan.s4 .dayblock .daytime { display: block; }
  .dayplan.s1 .daybody, .dayplan.s4 .daybody {
    position: static; width: auto; height: auto; border: 0; box-shadow: none; padding: 0; flex-wrap: wrap; background: transparent; }
  .dayplan.s1 .daytitle, .dayplan.s4 .daytitle { white-space: normal; font-size: 14.5px; color: var(--ink); -webkit-line-clamp: 2; }
  .dayplan.s1 .daymeta { display: flex; }
  .dayplan.s1 .daymeta .chip, .dayplan.s1 .daymeta .due, .dayplan.s4 .daymeta { display: inline-flex; }
  .dayplan.s4 .dayblock.q1, .dayplan.s4 .dayblock.q2, .dayplan.s4 .dayblock.q3, .dayplan.s4 .dayblock.q4 { background: #fff; }
  .dayplan.s4 .dayblock { border-left: 4px solid var(--blue); }
  .dayplan.s4 .dayblock.q1 { border-left-color: var(--red); }
  .dayplan.s4 .dayblock.q3 { border-left-color: var(--amber); }
  .dayplan.s4 .dayblock.q4 { border-left-color: #9fb4c2; }
  .dayplan.s4::after { display: none; }
  .dayplan.s4 .dayblock.lunch { background: #fff8e9; }
  .dayplan.s4 .dayblock.lunch .muted { display: block; }
  .stylepick { gap: 5px; }
  .stylebtn { flex: 1 1 auto; text-align: center; }
}

/* Horizontal bars: the title is the point — hide the controls, let it breathe. */
.dayplan.s1 .estsel, .dayplan.s1 .draghandle { display: none; }
.dayplan.s1 .dayblock { height: 34px; }
.dayplan.s1 .daybody { height: 30px; min-width: 118px; padding: 0 10px; cursor: grab; }
.dayplan.s1 .daytitle { font-size: 12px; }
.dayplan.s1 .dayblock.lunch .daybody { min-width: 90px; }
.dayplan.s1 .dayblock.lunch .daybody strong { font-size: 12px; }
.dayplan.s1 .dayblock.lunch .muted { display: none; }
.dayplan.s4 .dayblock { min-width: 30px; }
.dayplan.s4 .dayblock .daytitle { font-size: 10.5px; }

/* ---- notification dropdown: scrolling list, fixed actions ---- */
.ddpanel { padding: 0; }
.ddscroll { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ddfootwrap { border-top: 1px solid var(--line); background: #fff; border-radius: 0 0 12px 12px; position: sticky; bottom: 0; }
.ddfootwrap .ddfoot { border-top: 0; margin: 0; padding: 10px 12px; }
.ddloading { padding: 10px; text-align: center; font-size: 12px; color: var(--muted); }

/* ---- the big left-hand back zone on detail pages ---- */
#backzone {
  position: fixed; left: 0; top: 57px; bottom: 0;
  width: calc((100vw - 1040px) / 2 - 10px);
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 0; cursor: pointer; z-index: 40; padding: 0;
  background: linear-gradient(90deg, rgba(23,168,227,.13), rgba(23,168,227,.05) 55%, rgba(23,168,227,0));
  box-shadow: inset 1px 0 0 rgba(23,168,227,.16);
  transition: background .25s ease, box-shadow .25s ease;
  font-family: inherit;
}
#backzone::after {
  content: ''; position: absolute; right: 0; top: 12%; bottom: 12%; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(23,168,227,.5), transparent);
  filter: blur(.5px); opacity: .8;
}
#backzone .bzarrow {
  font-size: 40px; line-height: 1; color: var(--blue-dark);
  width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(23,168,227,.28); transition: transform .25s ease, box-shadow .25s ease;
}
#backzone .bztext { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--blue-dark); opacity: .75; }
#backzone:hover {
  background: linear-gradient(90deg, rgba(23,168,227,.26), rgba(23,168,227,.10) 55%, rgba(23,168,227,0));
  box-shadow: inset 1px 0 0 rgba(23,168,227,.3);
}
#backzone:hover .bzarrow { transform: translateX(-5px); box-shadow: 0 6px 26px rgba(23,168,227,.45); }
#backzone:active .bzarrow { transform: translateX(-9px) scale(.96); }
#backzone:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
/* only when there is genuinely a gutter to use */
@media (min-width: 1280px) { #backzone { display: flex; } }
@media (prefers-reduced-motion: reduce) { #backzone, #backzone .bzarrow { transition: none; } }

/* ==================== Timeline bars v2: full titles, descriptions, time-drag ==================== */
.stylenote { margin-left: 6px; }
.dayplan.s1 { padding-top: 26px; gap: 6px; }
.dayplan.s1 .dayblock { height: auto; min-height: 62px !important; }
.dayplan.s1 .daybody {
  height: auto; min-height: 58px; min-width: 230px; padding: 9px 14px;
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  cursor: grab; user-select: none; touch-action: none;
}
.dayplan.s1 .daybody:active { cursor: grabbing; }
.dayplan.s1 .daytext { display: flex; flex-direction: column; gap: 1px; width: 100%; min-width: 0; }
.dayplan.s1 .daytitle {
  font-size: 12.5px; line-height: 1.25; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dayplan.s1 .daydesc {
  font-size: 11px; line-height: 1.3; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dayplan.s1 .daymeta { display: flex; }
.dayplan.s1 .daymeta .chip { display: none; }
.dayplan.s1 .daymeta .chip.pin { display: inline-flex; font-size: 10px; padding: 1px 6px; }
.dayplan.s1 .dayblock.pinned .daybody { box-shadow: 0 0 0 2px rgba(253,46,179,.35), var(--shadow); }
.chip.pin { background: #fdeaf6; color: #b3117c; }

/* drag feedback — the bar you are holding must be the brightest thing on screen */
.dayplan.s1.dragging-now .daybody { transition: none; }
.dayplan.s1.dragging-now .dayblock:not(.timedrag) .daybody { opacity: .38; filter: saturate(.5); }
.dayplan.s1 .dayblock.timedrag { z-index: 40; }
.dayblock.timedrag .daybody {
  opacity: 1; transform: scale(1.02); cursor: grabbing;
  box-shadow: 0 0 0 3px var(--pink), 0 16px 34px rgba(23,39,51,.28);
}
/* the lane the bar will drop into */
#dropzone {
  position: absolute; border-radius: 12px; background: rgba(253,46,179,.1);
  border: 2px dashed rgba(253,46,179,.75); z-index: 28; pointer-events: none; display: none;
}
#dropguide {
  position: absolute; top: 22px; bottom: 0; width: 2px; background: var(--pink);
  box-shadow: 0 0 10px rgba(253,46,179,.7); z-index: 30; pointer-events: none; display: none;
}
/* the time readout rides directly above the bar you are dragging */
#droplabel {
  position: absolute; transform: translateY(-100%); background: var(--pink); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .01em; padding: 5px 12px; border-radius: 999px;
  white-space: nowrap; z-index: 41; pointer-events: none; display: none;
  box-shadow: 0 4px 14px rgba(253,46,179,.5);
}
#droplabel .dur { font-weight: 500; opacity: .85; margin-left: 6px; }
#droplabel::after {
  content: ''; position: absolute; left: 16px; top: 100%; width: 0; height: 0;
  border: 5px solid transparent; border-top-color: var(--pink);
}

/* ==================== Training library: category + course cards ==================== */
.crumb { display: inline-block; margin: 14px 0 -4px; color: var(--blue-dark); font-size: 14px; }
.catgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 12px 0 32px; }
.coursegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 16px 0 30px; }
.catcard, .ccard {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; color: var(--ink); position: relative;
  box-shadow: 0 2px 10px rgba(23,39,51,.07);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.catcard:hover, .ccard:hover {
  transform: translateY(-6px); border-color: rgba(23,168,227,.45);
  box-shadow: 0 16px 34px rgba(23,39,51,.16),
              0 12px 46px -8px rgba(23,168,227,.55),
              0 12px 46px -8px rgba(253,46,179,.4);
}
.ccimg {
  display: block; position: relative; aspect-ratio: 3 / 2; background-size: cover; background-position: center;
  background-color: #0E1C2E; transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.catcard:hover .ccimg, .ccard:hover .ccimg { transform: scale(1.045); }
.ccglow { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,168,227,0) 45%, rgba(14,28,46,.55)); transition: opacity .3s ease; }
.catcard:hover .ccglow, .ccard:hover .ccglow { opacity: .45; }
.catbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; }
.cattitle { font-size: 16px; font-weight: 600; }
.catcount { font-size: 12.5px; color: var(--muted); }
.catbody::after { content: 'View courses ›'; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--blue-dark);
  opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.catcard:hover .catbody::after { opacity: 1; transform: none; }
.ccbody { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 7px; }
.ccmeta { display: flex; gap: 5px; flex-wrap: wrap; }
.cctitle { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.ccsum { font-size: 12.5px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ccfor { font-size: 11.5px; color: var(--blue-dark); }
@media (max-width: 980px) { .coursegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .coursegrid, .catgrid { grid-template-columns: 1fr; gap: 16px; } }

/* ==================== Access grid + security log ==================== */
.accessgrid td, .accessgrid th { vertical-align: middle; }
.accessgrid td:first-child { max-width: 420px; }
.accesswho { text-align: center; white-space: nowrap; font-weight: 600; font-size: 13px; }
/* the avatar's centring comes from its own flex rules — display:block would clip the initials */
.accesswho .mini-avatar { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 4px; }
.accesswho { display: table-cell; }
.accesswho span.mini-avatar { margin-bottom: 5px; }
.accesscell { text-align: center; }
.switch { display: inline-block; position: relative; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  display: block; width: 42px; height: 24px; border-radius: 999px; background: #d6e2ea;
  position: relative; transition: background .2s ease;
}
.switch .track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(23,39,51,.3); transition: transform .2s ease;
}
.switch input:checked + .track { background: var(--blue); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--pink); outline-offset: 2px; }

.secstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 4px 0 16px; }
.secstat { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.secstat strong { display: block; font-size: 24px; line-height: 1.1; }
.secstat span { font-size: 12px; color: var(--muted); }
.secstat.ok strong { color: var(--green); }
.secstat.bad { border-color: #f3c3cd; background: #fff2f5; }
.secstat.bad strong { color: var(--red); }
.secstat.warn { border-color: #f2e0b8; background: #fff8e9; }
.secstat.warn strong { color: var(--amber); }
.secbadge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.secbadge.ok { background: #e5f7f0; color: #12996b; }
.secbadge.bad { background: #ffe9ed; color: #c9304a; }
.secbadge.warn { background: #fff3dc; color: #b87400; }
.secbadge.muted { background: var(--bg); color: var(--muted); }
.warncard { border-color: #f2e0b8; background: #fffdf7; }
.tablewrap { overflow-x: auto; }
.sectable { min-width: 620px; }
.nowrap { white-space: nowrap; }
.filtertabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.filtertab { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; background: #fff; }
.filtertab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 700px) {
  .secstats { grid-template-columns: repeat(2, 1fr); }
  .accessgrid td:first-child { max-width: none; }
}

/* ==================== Training progress ==================== */
.trainprog { padding: 14px 18px; }
.tp-row { display: flex; align-items: center; gap: 14px; }
.tp-bar { flex: 1; height: 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.tp-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), #1CAF68); transition: width .6s ease; }
.tp-pct { flex: none; font-size: 13.5px; font-weight: 700; color: var(--ink); min-width: 44px; text-align: right; }
.tp-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.tp-actions p { margin: 0; }
.tp-actions button[disabled] { opacity: .45; cursor: not-allowed; }

/* exercise comments on the module admin card */
.exnotes { display: inline-block; }
.exnotes summary { cursor: pointer; color: var(--blue-dark); font-size: 13px; }
.exnotelist { margin: 8px 0 4px; display: grid; gap: 8px; }
.exnote { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; }
.tp-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip.ok { background: #e5f7f0; color: #12996b; }
#confirmmsg { white-space: pre-line; text-align: left; }

/* ---- Tests register (insight -> task, TEST or decision) ---- */
.testrow { display: block; padding: 14px 16px; }
.testhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.testgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 16px; margin: 10px 0 4px; font-size: 13.5px; color: var(--ink); }
.testlbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.testactions { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; }
.chip.running { background: #e6f5fc; color: var(--blue-dark); }
.chip.due { background: #fff3dc; color: #b87400; }
.chip.due.overdue { background: #ffe9ed; color: var(--red); }
.chip.verdict.v-win { background: #e5f7f0; color: #12996b; }
.chip.verdict.v-loss { background: #ffe9ed; color: var(--red); }
.chip.verdict.v-inconclusive { background: #eef2f5; color: var(--muted); }
.grouph { margin: 26px 0 10px; font-size: 17px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 600; }
.stack label .muted { font-weight: 400; }
.stack input, .stack textarea, .stack select { font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; background: #fff; }
.qrow { display: flex; gap: 14px; flex-wrap: wrap; }
.qrow label { flex: 1; min-width: 180px; }
details.card > summary { cursor: pointer; }
.concludebox > summary { list-style: none; cursor: pointer; display: inline-block; }

/* ---- header: wider bar so nav labels always fit on one line ---- */
.top .wrap { max-width: 1320px; }
.bar { flex-wrap: nowrap; }
.navlink { white-space: nowrap; }
.brand { white-space: nowrap; }

/* Training progress view (super admins) + Mitch's course popup */
.tphead { display: flex; gap: 14px; align-items: center; }
.tpimg { width: 92px; height: 58px; border-radius: 8px; background-size: cover; background-position: center; flex: 0 0 auto; box-shadow: 0 1px 4px rgba(14, 28, 46, .18); }
.traincell .linkish { white-space: nowrap; }
.modal-card.wide { max-width: 720px; width: min(720px, 94vw); }
#tmgrid h3 { margin: 14px 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.tmrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.tmcourse { display: flex; align-items: center; gap: 9px; text-align: left; font: inherit; font-size: 13.5px; padding: 7px 9px; border-radius: 10px; border: 2px solid var(--line); background: #fff; cursor: pointer; }
.tmcourse .tmimg { width: 52px; height: 34px; border-radius: 6px; background-size: cover; background-position: center; flex: 0 0 auto; }
.tmcourse .tmst { display: block; font-size: 11.5px; color: var(--ink-faint); }
.tmcourse:hover { border-color: var(--blue); }
.tmcourse.st-open { border-color: var(--green, #1CAF68); background: #f0faf4; }
.tmcourse.st-done { border-color: var(--line); background: #f5f8fa; cursor: default; opacity: .75; }

/* Admin: floating section nav */
.adminnav { position: sticky; top: 8px; z-index: 40; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; margin: 12px 0 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 4px 18px rgba(14, 28, 46, .1); width: fit-content; max-width: 100%; }
.adminnav a { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 6px 12px; border-radius: 999px; }
.adminnav a:hover { background: #eaf5fb; color: var(--blue); }
#team, #access, #security, #ips, #clients, #api, #emails { scroll-margin-top: 70px; }
html { scroll-behavior: smooth; }

/* Course progress: what's left checklist */
.tp-checklist { margin: 10px 0 2px; font-size: 14px; }
.tp-checklist ul { list-style: none; margin: 6px 0 0; padding: 0; }
.tp-checklist li { padding: 3px 0; }

/* Tests wizard + metric comparison */
.twmetric { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 8px; margin: 6px 0; align-items: center; }
.twmetric input, .twmetric select { font: inherit; padding: 8px 10px; border: 2px solid var(--line); border-radius: 8px; }
.testmetrics { margin-top: 10px; }
.testmetrics th { font-size: 12px; }
@media (max-width: 640px) { .twmetric { grid-template-columns: 1fr 1fr; } }

/* Inline comment editing */
.cmeditform textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border: 2px solid var(--line); border-radius: 8px; }
.comment .linkish.cmedit { font-size: 12px; }
.comment .linkish.cmdel { font-size: 12px; color: var(--danger, #c62b5b); }

/* Inline status dropdown (task rows + My Day) */
select.rowstatus { font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 8px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
select.rowstatus:hover { border-color: var(--blue); }
select.rowstatus.st-open { color: #4a6172; }
select.rowstatus.st-in_progress { border-color: #17A8E3; color: #0f7fb0; background: #eaf5fb; }
select.rowstatus.st-waiting { border-color: #F5B300; color: #7a5a00; background: #fff8e6; }
select.rowstatus.st-review { border-color: #FD2EB3; color: #a11d55; background: #fdf1f6; }
select.rowstatus.st-done { border-color: #1CAF68; color: #116b3d; background: #eefaf3; }
.dayblock .rowstatus { font-size: 11.5px; padding: 3px 7px; }

/* Files posted inside a comment */
.cattrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 8px; }
.cattvid { max-width: 260px; max-height: 180px; border-radius: 8px; border: 1px solid var(--line); background: #000; }