/* ============================================================
   Time Card Calculator — styles
   One accent, one ink scale. No frameworks, no external fonts.
   System font stack so first paint is never blocked.
   ============================================================ */

:root{
  /* ink scale */
  --ink:      #101418;
  --ink-2:    #3d4750;
  --ink-3:    #6b7680;
  --ink-4:    #9aa4ad;
  --line:     #e3e7ea;
  --line-2:   #eef1f3;
  --bg:       #ffffff;
  --bg-2:     #f6f8f9;
  --bg-3:     #fbfcfc;

  /* accent + signal */
  --accent:   #1f6f4a;
  --accent-2: #17573a;
  --accent-w: #e8f3ed;
  --warn:     #b4451f;
  --warn-w:   #fdf0ea;

  --r:   10px;
  --r-sm: 8px;
  --r-lg: 16px;

  --shadow-1: 0 1px 2px rgba(16,20,24,.06), 0 1px 1px rgba(16,20,24,.04);
  --shadow-2: 0 2px 4px rgba(16,20,24,.05), 0 8px 20px -8px rgba(16,20,24,.12);

  --f: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fnum: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 720px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--ink);color:#fff;padding:10px 14px;border-radius:0 0 var(--r-sm) 0;
  font-size:14px;text-decoration:none;
}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- top bar ---------- */
.topbar{
  border-bottom:1px solid var(--line);
  background:var(--bg);
  position:sticky;top:0;z-index:20;
}
.topbar__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:56px;
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.brand__mark{
  width:9px;height:20px;border-radius:2px;
  background:var(--accent);
  box-shadow:5px 0 0 -1px var(--accent-w), 5px 0 0 0 var(--accent);
  flex:none;
}
.brand__name{font-weight:650;font-size:15px;letter-spacing:-.01em}
.topbar__note{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
@media (max-width:520px){ .topbar__note{display:none} }

/* ---------- tool block ---------- */
.tool{padding:28px 0 8px}
.tool__title{
  margin:0 0 6px;
  font-size:clamp(26px,4.4vw,34px);
  line-height:1.12;
  letter-spacing:-.022em;
  font-weight:680;
}
.tool__sub{
  margin:0 0 22px;
  color:var(--ink-2);
  font-size:15.5px;
  max-width:52ch;
}

/* ---------- settings ---------- */
.settings{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:20px;
}
@media (max-width:600px){ .settings{grid-template-columns:1fr 1fr} }
@media (max-width:420px){ .settings{grid-template-columns:1fr} }

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  letter-spacing:.005em;
}
.opt{font-weight:450;color:var(--ink-4);font-size:11.5px}

input,select,button{font:inherit;color:inherit}

input[type="date"],
input[type="number"],
input[type="time"],
select{
  width:100%;
  height:42px;
  padding:0 11px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:15px;
  transition:border-color .13s ease, box-shadow .13s ease, background .13s ease;
}
select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236b7680' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 11px center;
  padding-right:30px;
}
input:hover,select:hover{border-color:#d3d9dd}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-w);
}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* native picker glyph alignment */
input[type="time"]::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer}

.money{position:relative;display:flex;align-items:center}
.money__sym{
  position:absolute;left:11px;color:var(--ink-4);font-size:15px;pointer-events:none;
}
.money input{padding-left:25px}

/* ---------- overtime (inputs) ---------- */
.ot{
  margin:0 0 20px;
  padding:13px 15px 14px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--bg-2);
}
.ot__legend{
  padding:0 6px;
  font-size:12.5px;
  font-weight:650;
  color:var(--ink-2);
  letter-spacing:.005em;
}
.ot__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:9px;
}
@media (max-width:420px){ .ot__row{grid-template-columns:1fr} }
.ot__note{
  margin:0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-3);
  max-width:62ch;
}

/* ---------- overtime (output) ---------- */
.otout{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:13px 22px 15px;
  border-top:1px solid var(--line);
  background:var(--bg-2);
  animation:reveal .18s ease;
}
@media (max-width:560px){ .otout{padding:12px 16px 14px;gap:12px} }
.otout__cell{display:flex;flex-direction:column;gap:1px;min-width:0}
.otout__k{
  font-size:11px;font-weight:650;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.05em;
}
.otout__v{
  font-family:var(--fnum);font-variant-numeric:tabular-nums;
  font-size:19px;font-weight:640;letter-spacing:-.025em;color:var(--ink);
}
.otout__u{font-size:11px;color:var(--ink-4)}

/* ---------- day rows ---------- */
.grid-head{
  display:grid;
  grid-template-columns:74px 1fr 1fr 92px 82px 34px;
  gap:8px;
  padding:0 10px 7px;
  font-size:11.5px;
  font-weight:600;
  color:var(--ink-3);
  letter-spacing:.02em;
  text-transform:uppercase;
  border-bottom:1px solid var(--line);
  margin-bottom:6px;
}
.grid-head__tot{text-align:right}

.days{display:flex;flex-direction:column;gap:6px}

.day{
  display:grid;
  grid-template-columns:74px 1fr 1fr 92px 82px 34px;
  gap:8px;
  align-items:center;
  padding:5px 10px;
  border:1px solid transparent;
  border-radius:var(--r);
  background:var(--bg-3);
  transition:background .13s ease, border-color .13s ease;
}
.day:hover{background:var(--bg-2)}
.day:focus-within{
  background:var(--bg);
  border-color:var(--line);
  box-shadow:var(--shadow-1);
}
.day--weekend{background:#fafbfb}

.day__name{
  font-size:13.5px;font-weight:600;color:var(--ink-2);
  letter-spacing:-.005em;
}
.day__name small{
  display:block;font-weight:450;font-size:11px;color:var(--ink-4);letter-spacing:0;
}

/* split shift: the second pair is hidden until the row is split */
.day__times{display:flex;flex-direction:column;gap:4px}
.day__times .pair{display:flex;gap:6px}
.day__times .pair--extra{display:none}
.day__times .pair input{height:36px;font-size:14px}
.day--split .day__times .pair--extra{display:flex}

.day input[type="time"],
.day input[type="number"]{height:38px;font-size:14.5px}
.day input[type="number"]{text-align:center}

.day__tot{
  text-align:right;
  font-family:var(--fnum);
  font-size:14.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  letter-spacing:-.02em;
}
.day__tot.is-zero{color:var(--ink-4);font-weight:450}
.day__tot.is-bad{color:var(--warn)}

.day__x{
  width:30px;height:30px;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:transparent;color:var(--ink-4);
  cursor:pointer;font-size:17px;line-height:1;
  transition:background .13s ease,color .13s ease;
}
.day__x:hover{background:var(--warn-w);color:var(--warn)}
.day__x:disabled{opacity:0;pointer-events:none}

/* ---------- action buttons ---------- */
.tool__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0}

/* running total, inline with the controls */
.runsum{
  margin-left:auto;
  display:flex;align-items:baseline;gap:8px;
  padding:5px 12px;
  border-radius:999px;
  background:var(--accent-w);
  border:1px solid #d3e6db;
}
.runsum__k{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--accent-2);opacity:.75;
}
.runsum__v{
  font-family:var(--fnum);font-variant-numeric:tabular-nums;
  font-size:18px;font-weight:680;letter-spacing:-.03em;color:var(--accent-2);
  line-height:1;
}
.runsum__d{
  font-family:var(--fnum);font-variant-numeric:tabular-nums;
  font-size:12.5px;font-weight:550;color:var(--accent-2);opacity:.65;
  letter-spacing:-.02em;
}
@media (max-width:600px){ .runsum{display:none} }

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:38px;padding:0 14px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--bg);
  font-size:14px;font-weight:560;
  cursor:pointer;
  transition:background .13s ease,border-color .13s ease,transform .06s ease,color .13s ease;
}
.btn:hover{background:var(--bg-2);border-color:#d3d9dd}
.btn:active{transform:translateY(1px)}
.btn--ghost{color:var(--ink-2)}
.btn--quiet{color:var(--ink-3);margin-left:auto}
.btn--primary,.btn--primary:hover{
  background:var(--accent);border-color:var(--accent);color:#fff;
  height:42px;padding:0 18px;
  box-shadow:var(--shadow-1);
}
.btn--primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn--done{background:var(--accent-w)!important;border-color:var(--accent)!important;color:var(--accent-2)!important}

.copy__ico{
  width:13px;height:13px;flex:none;border-radius:2px;
  border:1.6px solid currentColor;border-top-width:3.4px;
  transition:opacity .13s ease;
}

@media (max-width:420px){ .btn--quiet{margin-left:0} }

/* ---------- results ---------- */
.result{
  margin-top:22px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-3) 100%);
  box-shadow:var(--shadow-2);
  overflow:hidden;
}

.result__main{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  align-items:end;
  gap:16px;
  padding:20px 22px 18px;
}
@media (max-width:560px){
  .result__main{grid-template-columns:1fr 1fr;padding:18px 16px 14px;gap:14px}
  .stat--lead{grid-column:1 / -1}
}

.stat{display:flex;flex-direction:column;gap:1px;min-width:0}
.stat__k{
  font-size:11.5px;font-weight:600;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.05em;
}
.stat__v{
  font-family:var(--fnum);
  font-variant-numeric:tabular-nums;
  font-size:27px;
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.15;
  color:var(--ink);
}
.stat--lead .stat__v{
  font-size:clamp(38px,8vw,52px);
  font-weight:680;
  letter-spacing:-.045em;
  color:var(--accent);
  line-height:1.02;
}
.stat--lead .stat__v::after{
  content:"";
  display:inline-block;
  width:0;
}
.stat__u{font-size:11.5px;color:var(--ink-4);letter-spacing:.01em}
.stat__v--dec{color:var(--ink-2)}

.result__foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 22px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.6);
}
@media (max-width:560px){ .result__foot{padding:13px 16px;flex-wrap:wrap} }

.gross{display:flex;flex-direction:column;gap:0}
.gross__k{font-size:11.5px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.gross__v{font-family:var(--fnum);font-variant-numeric:tabular-nums;font-size:20px;font-weight:640;letter-spacing:-.02em}

.result__warn{
  margin:0;padding:11px 22px;
  background:var(--warn-w);color:var(--warn);
  font-size:13px;font-weight:520;
  border-top:1px solid #f2d9cd;
}
@media (max-width:560px){ .result__warn{padding:10px 16px} }

/* ---------- prose ---------- */
.prose{padding:34px 0 0;max-width:66ch}
.prose h2{
  margin:0 0 10px;
  font-size:clamp(19px,2.6vw,22px);
  font-weight:660;
  letter-spacing:-.018em;
  line-height:1.25;
}
.prose__lede{color:var(--ink-2);font-size:15.5px;margin:0 0 20px}

.defs{display:flex;flex-direction:column;gap:2px;margin-bottom:20px}
.def{
  padding:16px 0 16px 0;
  border-top:1px solid var(--line);
}
.def:last-child{border-bottom:1px solid var(--line)}
.def h3{
  display:flex;align-items:center;gap:9px;
  margin:0 0 7px;
  font-size:15.5px;font-weight:640;letter-spacing:-.012em;
}
.def__n{
  flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--accent-w);color:var(--accent-2);
  font-size:11.5px;font-weight:700;
  display:grid;place-items:center;
  font-family:var(--fnum);
}
.def p{margin:0 0 7px;color:var(--ink-2);font-size:14.5px}
.def p:last-child{margin-bottom:0}
.def strong{color:var(--ink);font-weight:620}
.def__eg{
  display:inline-block;
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  padding:6px 10px;
  font-family:var(--fnum);
  font-size:13px;
  color:var(--ink-2)!important;
  letter-spacing:-.01em;
}
.def__eg span{
  font-family:var(--f);
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-4);
  margin-right:7px;
}

.prose__fine{
  font-size:13.5px;color:var(--ink-3);
  background:var(--bg-2);
  border-left:2px solid var(--line);
  padding:10px 14px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin:0;
}

/* ---------- faq ---------- */
.faq{border-bottom:1px solid var(--line)}
.faq:first-of-type{border-top:1px solid var(--line)}
.faq summary{
  cursor:pointer;
  padding:13px 26px 13px 0;
  font-size:14.8px;font-weight:580;
  letter-spacing:-.008em;
  position:relative;
  list-style:none;
  transition:color .13s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";
  position:absolute;right:4px;top:50%;
  width:7px;height:7px;
  border-right:1.8px solid var(--ink-4);
  border-bottom:1.8px solid var(--ink-4);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .16s ease,border-color .13s ease;
}
.faq[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--accent-2)}
.faq summary:hover::after{border-color:var(--accent)}
.faq p{
  margin:0 0 15px;padding-right:24px;
  color:var(--ink-2);font-size:14.5px;
  animation:reveal .18s ease;
}
@keyframes reveal{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* ---------- footer ---------- */
.foot{
  margin-top:44px;
  border-top:1px solid var(--line);
  padding:20px 0 30px;
}
.foot p{margin:0;font-size:12.5px;color:var(--ink-4)}

/* ---------- print ---------- */
@media print{
  .topbar,.tool__actions,.result__foot,.faq,.skip{display:none}
  .result{box-shadow:none;border-color:#bbb}
  .stat--lead .stat__v{color:#000}
  body{font-size:12pt}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* running total bar — mobile only */
.peek{display:none}

/* ---------- narrow: fold the grid ---------- */
@media (max-width:600px){
  .peek{
    position:sticky;
    bottom:0;
    display:flex;align-items:baseline;gap:9px;
    margin:14px -20px 0;
    padding:11px 20px calc(11px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.94);
    backdrop-filter:saturate(180%) blur(8px);
    -webkit-backdrop-filter:saturate(180%) blur(8px);
    border-top:1px solid var(--line);
    z-index:15;
  }
  .peek__k{
    font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;
    color:var(--ink-3);
  }
  .peek__v{
    font-family:var(--fnum);font-variant-numeric:tabular-nums;
    font-size:21px;font-weight:680;letter-spacing:-.03em;color:var(--accent);
    margin-left:auto;
  }
  .peek__d{
    font-family:var(--fnum);font-variant-numeric:tabular-nums;
    font-size:13.5px;font-weight:560;color:var(--ink-3);letter-spacing:-.02em;
  }
  .grid-head{display:none}
  .day{
    grid-template-columns:1fr 1fr 1fr;
    grid-template-areas:
      "name name tot"
      "in   out  br";
    gap:8px 7px;
    padding:11px 11px 12px;
    border-color:var(--line-2);
    background:var(--bg);
  }
  .day__name{grid-area:name;display:flex;align-items:baseline;gap:7px}
  .day__name small{display:inline;font-size:11px}
  .day__times{display:contents}
  .day__times .pair{display:contents}
  .day__times .pair--extra{display:none}
  .day__in{grid-area:in}
  .day__out{grid-area:out}
  .day__br{grid-area:br}
  .day__tot{grid-area:tot;align-self:center;font-size:15px}
  .day__x{
    position:absolute;top:6px;right:6px;
  }
  .day{position:relative}
  .day input[type="time"],.day input[type="number"]{height:40px}

  /* split shifts stack visibly on mobile */
  .day--split .day__times{display:flex;gap:5px;grid-area:times}
  .day--split .day__times .pair--extra{display:flex}
  .day--split .pair input{height:38px}
  .day--split{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "name name"
      "times times"
      "tot  br";
    gap:8px 7px;
  }
  .day--split .day__times{grid-area:times}
  .day--split .day__times .pair{gap:6px}
  .day--split .day__tot{grid-area:tot;text-align:left}
  .day--split .day__br{grid-area:br}

  .day label.mini{display:block;font-size:10.5px;color:var(--ink-4);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
}

@media (min-width:601px){
  .day label.mini{display:none}
}

/* ============================================================
   Interior pages (about / privacy / contact)
   Reuses the same tokens as the tool page. No new colours.
   ============================================================ */

.topnav{display:flex;align-items:center;gap:16px}
.topnav a{
  color:var(--ink-3);text-decoration:none;font-size:13.5px;font-weight:560;
  padding:4px 0;border-bottom:1.5px solid transparent;
}
.topnav a:hover{color:var(--ink)}
.topnav a[aria-current="page"]{color:var(--accent-2);border-bottom-color:var(--accent)}

/* top bar wraps the nav under the brand on narrow screens */
@media (max-width:640px){
  .topbar__in{flex-wrap:wrap;padding-top:8px;padding-bottom:8px;row-gap:2px}
  .topnav{gap:14px;order:3;width:100%}
  .topnav a{font-size:13px}
  .brand__name{font-size:14px}
}

.doc{padding:34px 0 0;max-width:66ch}
.doc__eyebrow{
  margin:0 0 6px;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-4);
}
.doc h1{
  margin:0 0 10px;font-size:clamp(24px,4vw,30px);font-weight:680;
  letter-spacing:-.022em;line-height:1.18;
}
.doc__lede{margin:0 0 24px;color:var(--ink-2);font-size:16px}
.doc h2{
  margin:26px 0 8px;font-size:17px;font-weight:650;letter-spacing:-.014em;
  padding-top:20px;border-top:1px solid var(--line);
}
.doc h2:first-of-type{border-top:0;padding-top:0;margin-top:22px}
.doc p{margin:0 0 12px;color:var(--ink-2);font-size:15px}
.doc p:last-child{margin-bottom:0}
.doc ul{margin:0 0 12px;padding-left:20px;color:var(--ink-2);font-size:15px}
.doc li{margin:0 0 6px}
.doc strong{color:var(--ink);font-weight:620}
.doc a{color:var(--accent-2)}
.doc__callout{
  margin:0 0 20px;padding:12px 15px;border-radius:var(--r-sm);
  background:var(--accent-w);border:1px solid #d3e6db;
  font-size:14.5px;color:var(--ink-2);
}
.doc__callout strong{color:var(--ink)}
.doc__meta{margin:26px 0 0;font-size:13px;color:var(--ink-4)}
.doc__back{
  display:inline-flex;align-items:center;gap:6px;margin:30px 0 0;
  font-size:14px;color:var(--accent-2);text-decoration:none;font-weight:560;
}
.doc__back:hover{text-decoration:underline}

/* footer with the three required links */
.foot__links{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 10px;padding:0;list-style:none;
}
.foot__links a{
  color:var(--ink-3);text-decoration:none;font-size:12.5px;font-weight:560;
  border-bottom:1px solid transparent;
}
.foot__links a:hover{color:var(--accent-2);border-bottom-color:var(--accent)}
.foot__links a[aria-current="page"]{color:var(--accent-2)}

/* related-calculator entries: the h3 is the link, so it must not look
   like a heading that happens to be clickable — no underline, weight kept */
.def h3 a{
  color:var(--accent-2);text-decoration:none;font-weight:640;letter-spacing:-.012em;
}
.def h3 a:hover{text-decoration:underline}

/* the "how this is worked out" line is long — let it wrap and stay readable */
#otCalcFoot{min-width:0}
#calcLine{
  font-family:var(--f);font-size:13.5px;font-weight:520;color:var(--ink-2);
  letter-spacing:0;line-height:1.45;
}
@media (max-width:560px){
  #calcLine{font-size:13px}
}