/* SUITE LOOK v1, 091726. One stylesheet for every tool. Tokens are the site's.
   Extracted from look.html 091726 so there is one source for the look.
   Every tool render (coverage, coach, report) links this file and adds nothing. */

:root{--paper:#F7F7F4;--card:#FFFFFF;--ink:#171717;--mid:#55554F;--line:#DADAD4;--rule:#C9C9C3;--wash:#EFEFEA;
--red:#B02E20;--redwash:#F7E9E6;--blue:#1F5673;--bluewash:#E8EFF3;--green:#3C6B4F;--greenwash:#E9F0EB}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font:15px/1.5 "Geist",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:40px 24px}
.wrap{max-width:1040px;margin:0 auto;display:grid;gap:40px}
.cap{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);font-weight:500}

/* --- the tool frame: title bar, tabs, body, footer --- */
.tool{background:var(--card);border:1px solid var(--rule)}
.bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--rule)}
.bar h1{font-size:16px;font-weight:600;letter-spacing:-.01em}
.bar .meta{font-size:13px;color:var(--mid);text-align:right}
.tabs{display:flex;gap:22px;padding:0 20px;border-bottom:1px solid var(--line);font-size:13px;color:var(--mid)}
.tabs span{padding:10px 0 9px;white-space:nowrap}
.tabs .on{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--red)}
.body{padding:18px 20px 20px}
.note{font-size:13px;color:var(--mid);margin-bottom:14px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-top:1px solid var(--rule);background:var(--wash)}
.btn{font:inherit;font-size:14px;font-weight:500;padding:9px 16px;border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
.btn.o{background:transparent;color:var(--ink)}

/* --- tables and the 8px status square --- */
table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--rule);background:var(--wash)}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
td.why{color:var(--mid);font-size:13px}
td.num{text-align:right;font-weight:500}
tr.flag td{background:var(--redwash)}
.st{display:inline-flex;align-items:center;gap:7px;font-weight:500;white-space:nowrap}
.st:before{content:"";width:8px;height:8px;background:currentColor;flex:none}
.st.g{color:var(--green)}.st.b{color:var(--blue)}.st.r{color:var(--red)}

/* --- chat shapes: the ask and the answer --- */
.you{background:var(--wash);border-left:2px solid var(--ink);padding:12px 16px;margin-bottom:18px}
.you .cap,.ans .cap{display:block;margin-bottom:4px}
.ans p{margin-bottom:10px;max-width:70ch}
.ans table{margin:4px 0 14px}
.plan td:first-child{font-weight:600;white-space:nowrap}
.src{font-size:12px;color:var(--mid);border-top:1px solid var(--line);margin-top:10px;padding-top:8px}

/* --- form shapes --- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.field{border-bottom:1px solid var(--line);padding:9px 0;display:grid;grid-template-columns:120px 1fr;gap:12px;font-size:14px}
.field .cap{padding-top:2px}
.draft{border:1px solid var(--line);padding:14px 16px;font-size:14px;margin-top:14px}
.dials{display:flex;gap:18px;margin-top:12px;font-size:13px;color:var(--mid)}
.dials b{color:var(--ink);font-weight:500}
h2.sec{font-size:13px;font-weight:600;margin:4px 0 10px}
h2.sec.sp{margin-top:20px}

/* --- absence chips (coverage: who's out, kept free) --- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chiplab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);font-weight:500;padding:5px 0}
.chip{border:1px solid var(--line);background:var(--wash);font-size:13px;padding:4px 9px;white-space:nowrap}
.chip b{font-weight:600}
.chip i{font-style:normal;color:var(--mid)}
.chip s{text-decoration:none;color:var(--mid);margin-left:6px}
.only-m{display:none}

/* --- the headline count and its supporting lines --- */
.tally{border:1px solid var(--rule);border-left:2px solid var(--ink);padding:14px 16px;margin-bottom:16px}
.tally h2{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.tally p{font-size:13px;color:var(--mid);margin-top:3px}

/* --- a call the tool will not make for you --- */
.call{border:1px solid var(--rule);border-left:2px solid var(--red);padding:14px 16px;margin-bottom:14px}
.call .cap{color:var(--red)}
.call h3{font-size:14px;font-weight:600;margin:6px 0 5px}
.call p{font-size:13px;color:var(--mid);max-width:74ch}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.opt{border:1px solid var(--line);padding:10px 12px}
.opt b{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.opt span{font-size:12px;color:var(--mid)}

/* --- the report's snapshot strip --- */
.snap{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);margin-bottom:16px}
.snap div{padding:10px 12px;border-right:1px solid var(--line)}
.snap div:last-child{border-right:0}
.snap .cap{display:block;margin-bottom:4px}
.snap b{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.snap .up{color:var(--green)}
.who{font-size:13px;color:var(--mid);margin:-4px 0 14px}
.who b{color:var(--ink);font-weight:600;font-size:15px}

/* --- phone --- */
@media (max-width:760px){
  body{padding:16px 12px}
  .wrap{gap:24px}
  .grid2,.opts{grid-template-columns:1fr}
  .snap{grid-template-columns:repeat(3,1fr)}
  .snap div:nth-child(3){border-right:0}
  .snap div:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .hide-m{display:none}
  .only-m{display:inline}
  .tabs{gap:16px}
  .bar{flex-direction:column;align-items:flex-start;gap:3px}
  .bar .meta{text-align:left}
  .tally h2{font-size:17px}
  .foot{flex-direction:column;align-items:stretch;gap:10px}
  .foot .btn{width:100%}
  /* nothing is allowed to push the page sideways on a phone */
  .body{padding:16px 14px 18px}
  table{font-size:13px}
  th,td{padding:8px 6px;overflow-wrap:break-word}
  .st{white-space:normal;align-items:flex-start}
  .st:before{margin-top:5px}
  .you{font-size:13px}
  .ans p,.call p{font-size:13px}
  .chips{gap:6px}
  .chips .chiplab{flex:1 0 100%;padding-bottom:0}
  .chip{white-space:normal;font-size:12px}
  .who b{font-size:14px}
  .call h3{font-size:13px}
  .opt span{font-size:12px}
}
