/*
  tol-workpaper.css — fill-in workpapers, Spread Love & Acceptance
  Loads after /assets/css/site.css and /assets/css/reading.css. The page
  itself (type, column, header) comes from those; this file only styles the
  form. It sets no global variables, and every colour has a fallback.
*/

.wpf-form, .wpf-form *, .wpf-bar, .wpf-bar *, .wpf-privacy, .wpf-table-box{ box-sizing: border-box; }

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

.wpf-lede{ color: var(--ink-soft, #524B3E); }

.wpf-privacy{
  margin: 1.4em 0 1.8em;
  padding: 1em 1.2em;
  background: var(--credit-soft, #E4EDE3);
  border-left: 3px solid var(--credit, #3E6B4C);
}
.wpf-privacy p{ margin: 0; }
.wpf-privacy p + p{ margin-top: 0.4em; font-size: 0.92em; color: var(--ink-soft, #524B3E); }

/* ---------- fields ---------- */
.wpf-meta{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1em 1.3em;
  padding: 1.1em 1.2em;
  background: var(--paper-deep, #ECE2C4);
  border: 1px solid var(--line, #D9CBA3);
  border-radius: 3px;
}
.wpf-field label{ display: block; font-size: 0.85em; font-weight: 600; margin-bottom: 0.25em; }
.wpf-wide{ margin-top: 1em; }

.wpf-form input[type="text"], .wpf-form input[type="number"], .wpf-form input[type="date"],
.wpf-form select, .wpf-form textarea{
  width: 100%;
  font: inherit; font-size: 0.95rem;
  color: var(--ink, #211D17);
  background: #FFFDF7;
  border: 1px solid var(--line, #D9CBA3);
  border-radius: 3px;
  padding: 7px 9px;
  margin: 0;
}
.wpf-form textarea{ resize: vertical; min-height: 2.6em; line-height: 1.45; }
.wpf-form input:hover, .wpf-form select:hover, .wpf-form textarea:hover{ border-color: var(--brass, #A8792F); }
.wpf-form input[type="checkbox"]{ width: 20px; height: 20px; accent-color: var(--credit, #3E6B4C); }
.wpf-form :focus-visible{ outline: 2px solid var(--focus, #2B5B8C); outline-offset: 2px; }

.wpf-help{ display: block; font-size: 0.85em; color: var(--ink-soft, #524B3E); margin: 0.3em 0 0; }
.wpf-optin{ display: flex; align-items: center; gap: 8px; margin-top: 0.5em; font-size: 0.9em; }
.wpf-field .wpf-tick{ display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1em; font-weight: 500; cursor: pointer; }
.wpf-note{ font-style: italic; color: var(--ink-soft, #524B3E); margin: 1.6em 0 0; }

.wpf-section{ margin-top: 2.2em; }
.wpf-intro{ color: var(--ink-soft, #524B3E); font-size: 0.95em; margin: 0 0 0.9em; }

/* ---------- tables: they stay inside their card (scrolling sideways only if a table truly can't fit) ---------- */
.wpf-table-box{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}
.wpf-table{ width: 100%; border-collapse: collapse; margin: 0; }
.wpf-table th{
  text-align: left;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem; font-weight: 500;
  color: var(--ink-soft, #524B3E);
  padding: 8px 6px;
  background: var(--paper-deep, #ECE2C4);
  border-bottom: 1px solid var(--brass, #A8792F);
  vertical-align: bottom;
}
.wpf-table td{ padding: 5px 4px; border-bottom: 1px solid var(--line, #D9CBA3); vertical-align: top; height: auto; }
/* the reading pages give every td a fixed height; a worksheet cell holds a label and a field, so it grows */
.read .wpf-table td{ height: auto; }
.wpf-table td + td, .wpf-table th + th{ border-left: 0; }
.wpf-table input, .wpf-table select, .wpf-table textarea{ max-width: 100%; box-sizing: border-box; }
.wpf-table select{ min-width: 4.6em; padding-right: 4px; }
.wpf-table td output{ display: block; padding: 7px 4px; font-weight: 600; }
.wpf-table th.wpf-rowlabel{
  font-family: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink, #211D17);
  background: transparent; border-bottom: 1px solid var(--line, #D9CBA3); vertical-align: middle; width: 22%;
}
.wpf-remove{ width: 40px; text-align: center; }
.wpf-remove button{
  width: 32px; height: 32px;
  border: 1px solid transparent; border-radius: 3px;
  background: transparent; color: var(--ink-soft, #524B3E);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.wpf-remove button:hover{ border-color: var(--debit, #96412B); color: var(--debit, #96412B); }

.wpf-table-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.wpf-undo{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: #FFF6E5; border: 1px solid #E8C98A; color: #4A3418; font-size: .95rem; }
.wpf-undo .wpf-add{ min-height: 40px; }
@media print{ .wpf-undo{ display: none !important; } }
.wpf-add{
  font: inherit; font-size: 0.9rem;
  padding: 7px 14px;
  border: 1px dashed var(--brass, #A8792F); border-radius: 3px;
  background: transparent; color: var(--ink, #211D17); cursor: pointer;
}
.wpf-add:hover{ background: var(--paper-deep, #ECE2C4); border-style: solid; }

/* ---------- scales and choices ---------- */
.wpf-scale, .wpf-check{ border: 0; border-bottom: 1px solid var(--line, #D9CBA3); margin: 0; padding: 0.75em 0; }
.wpf-scale legend, .wpf-check legend{ padding: 0; font-weight: 600; float: left; width: 100%; margin-bottom: 0.5em; }
.wpf-scale-opts, .wpf-choice{ clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.wpf-scale-opts label, .wpf-choice label{ position: relative; cursor: pointer; }
.wpf-scale-opts input, .wpf-choice input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.wpf-scale-opts span, .wpf-choice span{
  display: inline-block; min-width: 44px; padding: 8px 14px; text-align: center;
  border: 1px solid var(--line, #D9CBA3); border-radius: 3px; background: #FFFDF7;
}
.wpf-scale-opts label:hover span, .wpf-choice label:hover span{ border-color: var(--brass, #A8792F); }
.wpf-scale-opts input:checked + span, .wpf-choice input:checked + span{
  background: var(--ink, #211D17); border-color: var(--ink, #211D17); color: var(--paper, #F5EFDE); font-weight: 600;
}
.wpf-scale-opts input:focus-visible + span, .wpf-choice input:focus-visible + span{ outline: 2px solid var(--focus, #2B5B8C); outline-offset: 2px; }

.wpf-scale-ends{ display: flex; justify-content: space-between; max-width: 252px; margin: 0.35em 0 0; font-size: 0.8rem; color: var(--ink-soft, #524B3E); }
.wpf-more summary{ cursor: pointer; }
.wpf-more summary::marker{ color: var(--credit, #3E6B4C); }
.wpf-more .wpf-help{ margin-top: 0.4em; }

/* ---------- starter rows shown as examples (WP-03) ---------- */
.wpf-ex-tag{ display: none; }
.wpf-row-example .wpf-ex-tag{
  display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px;
  font-size: 0.78rem; font-style: normal; line-height: 1.5; white-space: nowrap;
  background: var(--paper-deep, #ECE2C4); color: var(--ink-soft, #524B3E);
}
.wpf-row-example td input, .wpf-row-example td select{ border-style: dashed; }
.wpf-row-example td input[data-col="task"]{ color: var(--ink-soft, #524B3E); }
.wpf-ex-clear[hidden]{ display: none; }

/* ---------- the closing tick ---------- */
.wpf-agreed-note{ margin: 0.5em 0 0; font-size: 0.95em; }
.wpf-agreed-note:empty{ display: none; }
.wpf-agreed-note.is-agreed{
  display: inline-block; padding: 6px 12px; border-radius: 3px;
  background: var(--credit-soft, #E4EDE3); color: var(--credit, #3E6B4C); font-weight: 600;
}
.wpf-agreed-note.is-waiting{ color: var(--ink-soft, #524B3E); }
.wpf-form input[type="checkbox"]:disabled{ opacity: 0.55; cursor: not-allowed; }
.wpf-form input[type="checkbox"]:disabled + *{ cursor: not-allowed; }

/* ---------- calculated results ---------- */
.wpf-computed dl{
  margin: 0; padding: 1em 1.2em;
  background: var(--credit-soft, #E4EDE3);
  border-left: 3px solid var(--credit, #3E6B4C);
  display: grid; grid-template-columns: minmax(120px, 11rem) 1fr; gap: 0.6em 1.1em;
}
.wpf-computed dt{ font-weight: 600; color: var(--credit, #3E6B4C); }
.wpf-computed dd{ margin: 0; white-space: pre-line; }
.wpf-computed dd .wpf-help{ font-style: italic; white-space: normal; }

/* ---------- save bar ---------- */
.wpf-bar{
  position: sticky; bottom: 0;
  margin-top: 3em;
  background: var(--paper-deep, #ECE2C4);
  border-top: 1px solid var(--brass, #A8792F);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
}
.wpf-bar-inner{ max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
#wpf-status{ margin: 0; font-size: 0.88rem; color: var(--ink-soft, #524B3E); flex: 1 1 220px; }
#wpf-status:empty{ display: none; }
.wpf-bar-actions{ display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.wpf-bar-more{ display: none; }
.wpf-bar button{ font: inherit; font-size: 0.92rem; font-weight: 600; padding: 9px 16px; border-radius: 3px; cursor: pointer; }
.wpf-btn{ background: var(--ink, #211D17); color: var(--paper, #F5EFDE); border: 1px solid var(--ink, #211D17); }
.wpf-btn:hover{ background: var(--credit, #3E6B4C); border-color: var(--credit, #3E6B4C); }
.wpf-btn-quiet{ background: transparent; color: var(--ink, #211D17); border: 1px solid var(--ink-soft, #524B3E); }
.wpf-btn-quiet:hover{ background: var(--paper, #F5EFDE); }

.wpf-after{ margin-top: 2.4em; font-size: 0.9em; color: var(--ink-soft, #524B3E); }
.wpf-clear{
  font: inherit; font-size: 0.9em;
  background: transparent; color: var(--debit, #96412B);
  border: 1px solid var(--debit, #96412B); border-radius: 3px;
  padding: 5px 11px; margin-left: 4px; cursor: pointer;
}

/* ---------- list of workpapers (index page) ---------- */
.wpf-list{ list-style: none; padding: 0; margin: 1em 0 0; border-top: 1px solid var(--line, #D9CBA3); }
.wpf-list li{ padding: 0.9em 0; margin: 0; border-bottom: 1px solid var(--line, #D9CBA3); }
.wpf-list .code{ display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.78em; color: var(--brass, #A8792F); }
.wpf-list a{ font-weight: 600; font-size: 1.08em; }
.wpf-list p{ margin: 0.2em 0 0; color: var(--ink-soft, #524B3E); font-size: 0.95em; }

/* ---------- narrow boxes or large text: table rows become cards ----------
   A container query in rem, so it follows the box's real width and the reader's text size: a table
   that fits at normal text becomes one card per row at "Larger" text on a tablet. */
.wpf-table-box{ container: wpftable / inline-size; }
.wpf-table tr[hidden]{ display: none !important; }
.wpf-rows-for{ width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 .6em; font-size: .92em; font-weight: 600; }
.wpf-rows-for select{ flex: 1 1 10rem; min-width: 0; max-width: 100%; min-height: 40px; font: inherit; font-weight: 400; }
.wpf-turn{ margin: 0 0 .7em; padding: .5em .8em; border-radius: 6px; background: #EEF4FA; border: 1px solid #CFDDEE; font-size: .92em; }
@container wpftable (max-width: 40rem){
  .wpf-table thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .wpf-table, .wpf-table tbody, .wpf-table tr, .wpf-table td, .wpf-table th.wpf-rowlabel{ display: block; width: 100%; box-sizing: border-box; height: auto; }
  /* one row, lightly: no box around it and none around each field, just a thin line between rows.
     The job (the first field) has the whole width; the short choices sit side by side while they fit,
     and stack one under another at large text. */
  .wpf-table tr{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); gap: 2px 12px;
    border: 0; border-top: 1px solid var(--line, #D9CBA3); border-radius: 0; padding: 12px 40px 12px 0; margin: 0; background: transparent; position: relative; }
  .wpf-table tbody tr:first-child{ border-top: 0; padding-top: 4px; }
  .wpf-table td, .wpf-table th.wpf-rowlabel{ grid-column: auto; min-width: 0; }
  .wpf-table td:first-of-type, .wpf-table th.wpf-rowlabel, .wpf-table td:has(> textarea), .wpf-table td:has(> input[type="text"]):not(:first-of-type){ grid-column: 1 / -1; }
  .wpf-table td{ padding: 3px 0; background: transparent; box-shadow: none; border-radius: 0; }
  /* the reading pages draw a hairline under every cell inside a card (an !important rule in site.css); not here */
  :is(#wpf-root, .wpf-form) .wpf-table td{ border: 0 !important; }
  .wpf-table td[data-label]::before{
    content: attr(data-label); display: block;
    font-family: inherit; font-size: 0.85rem; font-weight: 600; line-height: 1.3;
    color: var(--ink-soft, #524B3E); margin-bottom: 2px;
  }
  .wpf-table td input:not([type="checkbox"]):not([type="radio"]), .wpf-table td select, .wpf-table td textarea{ width: 100%; min-width: 0; }
  .wpf-table td select{ border-color: var(--line, #D9CBA3); }
  .wpf-table th.wpf-rowlabel{ border: 0; padding: 0 0 4px; }
  .wpf-table td.wpf-remove{ position: absolute; top: 8px; right: 0; width: auto; padding: 0; }
  .wpf-table tr.wpf-row-mine{ box-shadow: inset 3px 0 0 var(--brass, #A8792F); padding-left: 10px; }
}
/* the folded filled-in example: wrap its words rather than scroll sideways */
@container wpftable (max-width: 40rem){
  .wpf-example-table{ table-layout: fixed; width: 100%; }
  .wpf-example-table th, .wpf-example-table td{ overflow-wrap: anywhere; hyphens: auto; }
}

/* ---------- small screens: table rows become cards ---------- */
@media (max-width: 720px){
  .wpf-table-box{ width: 100%; margin-left: 0; transform: none; }
  .wpf-table thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .wpf-table, .wpf-table tbody, .wpf-table tr, .wpf-table td, .wpf-table th.wpf-rowlabel{ display: block; width: 100%; box-sizing: border-box; height: auto; }
  /* one row, lightly: no box around it and none around each field, just a thin line between rows.
     The job (the first field) has the whole width; the short choices sit side by side while they fit,
     and stack one under another at large text. */
  .wpf-table tr{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); gap: 2px 12px;
    border: 0; border-top: 1px solid var(--line, #D9CBA3); border-radius: 0; padding: 12px 40px 12px 0; margin: 0; background: transparent; position: relative; }
  .wpf-table tbody tr:first-child{ border-top: 0; padding-top: 4px; }
  .wpf-table td, .wpf-table th.wpf-rowlabel{ grid-column: auto; min-width: 0; }
  .wpf-table td:first-of-type, .wpf-table th.wpf-rowlabel, .wpf-table td:has(> textarea), .wpf-table td:has(> input[type="text"]):not(:first-of-type){ grid-column: 1 / -1; }
  .wpf-table td{ padding: 3px 0; background: transparent; box-shadow: none; border-radius: 0; }
  /* the reading pages draw a hairline under every cell inside a card (an !important rule in site.css); not here */
  :is(#wpf-root, .wpf-form) .wpf-table td{ border: 0 !important; }
  .wpf-table td[data-label]::before{
    content: attr(data-label); display: block;
    font-family: inherit; font-size: 0.85rem; font-weight: 600; line-height: 1.3;
    color: var(--ink-soft, #524B3E); margin-bottom: 2px;
  }
  .wpf-table td input:not([type="checkbox"]):not([type="radio"]), .wpf-table td select, .wpf-table td textarea{ width: 100%; min-width: 0; }
  .wpf-table td select{ border-color: var(--line, #D9CBA3); }
  .wpf-table th.wpf-rowlabel{ border: 0; padding: 0 0 4px; }
  .wpf-table td.wpf-remove{ position: absolute; top: 8px; right: 0; width: auto; padding: 0; }
  .wpf-table tr.wpf-row-mine{ box-shadow: inset 3px 0 0 var(--brass, #A8792F); padding-left: 10px; }
  .wpf-computed dl{ grid-template-columns: 1fr; gap: 2px; }
  .wpf-computed dd{ margin-bottom: 10px; }
  .wpf-bar-actions{ width: 100%; }
  .wpf-bar-actions button{ flex: 1 1 auto; }
  /* one row on a phone: Save draft, Download PDF and More; Open and Fillable PDF open under More.
     The hiding rule only applies while More is closed (:not(.is-open)), so nothing has to out-rank it
     to show the buttons again: an earlier version hid them with an id selector and they stayed hidden. */
  .wpf-bar{ padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .wpf-bar-actions.has-more:not(.is-open) .wpf-btn-quiet:not(.wpf-bar-more):not(#wpf-save){ display: none; }
  .wpf-bar-actions.has-more #wpf-save{ display: inline-block; order: 1; flex: 1 1 auto; }
  .wpf-bar-actions.has-more.is-open .wpf-btn-quiet:not(.wpf-bar-more){ display: inline-block; flex: 1 1 30%; }
  .wpf-bar-actions.has-more .wpf-bar-more{ display: inline-block; flex: 0 0 auto; order: 2; }
  .wpf-bar-actions.has-more .wpf-btn{ order: 1; flex: 1 1 auto; }
  .wpf-bar-actions.has-more.is-open .wpf-btn-quiet:not(.wpf-bar-more):not(#wpf-save){ order: 3; }
}

/* ================= Workpaper Suite (suite.html) ================= */
.ws-lede{ font-size: 1.08em; color: var(--ink-soft, #524B3E); }
.ws-step{ margin-top: 2.6em; }
.ws-step > h2{ display: flex; align-items: center; gap: 0.55em; margin-bottom: 0.3em; }
.ws-num{
  flex: none; display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%;
  background: #F7CAD4; color: #3C3350; font-size: 0.8em; font-family: "IBM Plex Mono", ui-monospace, monospace;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
}
.ws-sub{ color: var(--ink-soft, #524B3E); margin-top: 0; }

/* roads */
.ws-paths{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 1em; }
.ws-path{
  --c: #F7CAD4;
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; min-height: 64px;
  text-align: left; font: inherit; color: var(--ink, #211D17); cursor: pointer;
  padding: 12px 14px 12px 60px; border-radius: 18px; border: 1px solid rgba(60,51,80,.12); background: #FFFDF7;
  transition: transform .35s var(--ease-out, ease), box-shadow .35s var(--ease-out, ease), background-color .35s;
}
.ws-path:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(120,90,140,.14); }
.ws-path:focus-visible{ outline: 2px solid var(--focus, #2B5B8C); outline-offset: 2px; }
.ws-path-icon{ position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--c); font-size: 1.05em; }
.ws-path-name, .ws-path-blurb{ display: block; }
.ws-path-name{ line-height: 1.25; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.05em; }
.ws-path-blurb{ margin-top: 2px; font-size: 0.82em; line-height: 1.35; color: var(--ink-soft, #524B3E); }
.ws-path.is-on{ background: var(--c); border-color: transparent; box-shadow: 0 10px 26px rgba(120,90,140,.18); }
.ws-path.is-on .ws-path-icon{ background: #fff; }
.ws-path.is-on::after{ content: "\2665"; position: absolute; top: 8px; right: 12px; color: #C95B7A; font-size: .9em; animation: ws-pop .5s var(--ease-out, ease); }

/* "What brings you here?" on a road with another way in (Partners: unfair, or fine but flat) */
.ws-focus{ margin-top: 1em; padding: .9em 1em; border-radius: 18px; background: #FFF6EC; border: 1px solid #F1DCC2; }
.ws-focus-q{ margin: 0 0 .5em; font-weight: 600; }
.ws-focus-row{ display: flex; flex-wrap: wrap; gap: 8px; }
.ws-focus-b{
  font: inherit; font-size: .95rem; cursor: pointer; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid #D9C8F0; background: #fff; color: #4E3F6B; text-align: left;
}
.ws-focus-b.is-on{ background: #F7CAD4; border-color: #E8A5B8; color: #3C3350; font-weight: 600; }
.ws-focus-b.is-on::before{ content: "\2713"; margin-right: 6px; }
.ws-focus-b:focus-visible{ outline: 2px solid var(--focus, #2B5B8C); outline-offset: 2px; }
.ws-focus-note{ margin: .6em 0 0; font-size: .92em; color: var(--ink-soft, #524B3E); }
.ws-focus-more{ margin: .5em 0 0; font-size: .92em; }
.ws-focus-each{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 8px 12px; margin-top: .7em; }
.ws-focus-p{ display: flex; flex-direction: column; gap: 3px; font-size: .9em; font-weight: 600; min-width: 0; }
.ws-focus-p select{ width: 100%; max-width: 100%; font: inherit; font-weight: 400; min-height: 42px; padding: 6px 10px; border-radius: 12px; border: 1px solid #E5CDB0; background: #fff; }

.ws-names{ margin-top: 1.2em; padding: 1em 1.1em; border-radius: 18px; background: #F6EEF8; }
.ws-names-q{ margin: 0 0 .6em; font-weight: 600; }
.ws-names-q span{ font-weight: 400; color: var(--ink-soft, #524B3E); font-size: .9em; }
.ws-names-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ws-names label span{ display: block; font-size: .82em; font-weight: 600; margin-bottom: 3px; }
.ws-names input, .ws-sheet-label input{
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 9px 12px; border-radius: 12px;
  border: 1px solid #E0D0EA; background: #fff; color: var(--ink, #211D17);
}
.ws-care{ margin: .7em 0 0; font-style: italic; color: var(--ink-soft, #524B3E); font-size: .92em; }

/* the road */
.ws-progress{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink-soft, #524B3E); font-size: .92em; margin: .3em 0 1em; }
.ws-bubbles{ display: inline-flex; gap: 5px; }
.ws-bubbles span{ width: 14px; height: 14px; border-radius: 50%; border: 1px solid #C9B6DA; background: #fff; transition: background-color .5s; }
.ws-bubbles span.is-on{ background: radial-gradient(circle at 35% 35%, #fff 0 18%, #F7CAD4 20%); border-color: #E8A5B8; }
.ws-road-empty{ padding: 1.2em; border-radius: 18px; border: 1px dashed #D9C8F0; text-align: center; color: var(--ink-soft, #524B3E); }
.ws-road, .ws-stops{ list-style: none; padding: 0; margin: 0; }
.ws-group{ margin: 0 0 1.4em; }
.ws-group-title{ margin: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--credit, #3E6B4C); }
.ws-group-note{ margin: .1em 0 .6em; font-size: .9em; color: var(--ink-soft, #524B3E); }
.ws-along{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 .8em; padding: .55em .7em; border-radius: 14px; background: #F4F9F2; border: 1px dashed #CFE0CC; }
.ws-along-k{ width: 100%; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--credit, #3E6B4C); }
.ws-along-a{ display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: 999px; background: #fff; border: 1px solid #CFE0CC; color: #2F5A3D; font-size: .88rem; text-decoration: none; }
.ws-along-a::before{ content: "\1F4D6"; margin-right: 6px; font-size: .9em; }
.ws-along-a:hover{ background: #EAF3E7; }
.ws-read{ display: inline-block; margin: 0 0 .6em; font-size: .88rem; color: #6B4E8A; }
.ws-stop{ --c: #F7CAD4; position: relative; display: flex; gap: 14px; padding: 0 0 14px 0; margin: 0; }
.ws-stop::before{ content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; border-left: 2px dotted #D6BE8E; }
.ws-stops > .ws-stop:last-child::before{ display: none; }
.ws-dot{
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid #D6BE8E; color: var(--brass-ink, #7A5620); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .9rem;
  transition: background-color .5s, border-color .5s;
}
.ws-stop.is-done .ws-dot{ background: var(--c); border-color: #E8A5B8; color: #C95B7A; font-size: 1.2rem; box-shadow: inset -4px -5px 0 rgba(255,255,255,.35); }
.ws-stop.is-stamp .ws-dot{ animation: ws-stamp .8s var(--ease-out, ease); }
.ws-stop-body{ flex: 1; min-width: 0; padding: 10px 14px 12px; border-radius: 18px; background: #FFFDF7; border: 1px solid rgba(60,51,80,.1); }
.ws-stop.is-done .ws-stop-body{ border-color: #F0C9D5; }
.ws-stop-code{ margin: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .72rem; color: var(--brass-ink, #7A5620); }
.ws-optional{ display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #EEF3F8; border: 1px solid #CBD8E6; color: #3A5470; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.ws-stop.is-reading .ws-dot{ border-style: dashed; }
.ws-stop.is-reading .ws-stop-body{ background: #F4F9F2; border-color: #CFE0CC; }
.ws-stop.is-reading .ws-read{ margin: 0; font-weight: 600; }
.ws .ws-stop-name{ margin: .1em 0 .15em; font-size: 1.12rem; line-height: 1.25; }
.ws-stop-why{ margin: 0 0 .6em; font-size: .92em; color: var(--ink-soft, #524B3E); }
.ws-sheets{ display: flex; flex-wrap: wrap; gap: 8px; }
.ws-sheet-btn{
  display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: .92rem; cursor: pointer; min-height: 44px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid #D9C8F0; background: #fff; color: #4E3F6B;
  transition: background-color .3s, transform .3s var(--ease-out, ease);
}
.ws-sheet-btn:hover{ background: #F3EEF9; transform: translateY(-1px); }
.ws-sheet-btn.is-filled{ background: var(--c); border-color: transparent; color: #3C3350; }
.ws-sheet-label{ font-weight: 600; }
.ws-sheet-meta{ font-size: .8em; opacity: .8; }
.ws-again, .ws-chip, .ws-link{
  font: inherit; font-size: .88rem; cursor: pointer; min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1px dashed #C9B6DA; background: transparent; color: #4E3F6B;
}
.ws-again:hover, .ws-chip:hover{ background: #F3EEF9; border-style: solid; }
.ws-link{ min-height: 0; padding: 0; border: 0; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.ws-add{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: .4em; }
.ws-add-label{ font-size: .88em; color: var(--ink-soft, #524B3E); margin-right: 4px; }
.ws-step.is-waiting .ws-add{ display: none; }

/* drop zone */
.ws-drop{
  text-align: center; padding: 1.3em 1.2em; border-radius: 22px; border: 2px dashed #D9C8F0;
  background: linear-gradient(145deg, #FFF8EE 0%, #F6EEF8 55%, #EEF4FA 100%); transition: border-color .3s, transform .3s var(--ease-out, ease);
}
.ws-drop.is-over{ border-color: #C95B7A; transform: scale(1.01); }
.ws-drop.is-stamp{ animation: ws-pop .6s var(--ease-out, ease); }
.ws-drop-art{ font-size: 2rem; margin: 0; line-height: 1; }
.ws-drop p{ margin: .4em 0; }
.ws-drop-kinds{ font-size: .88em; color: var(--ink-soft, #524B3E); }
.ws-drop-note{ font-weight: 600; color: var(--credit, #3E6B4C); }
.ws-drop-note:empty{ display: none; }

/* making the PDFs */
.ws-out{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ws-out-card{ display: flex; flex-direction: column; padding: 1.1em 1.2em; border-radius: 22px; background: #FDEEF2; border: 1px solid #F3CFDA; }
.ws-out-card.is-report{ background: #EEF4EC; border-color: #CFE0CC; }
.ws .ws-out-card h3{ margin: .1em 0 .3em; }
.ws-out-card p{ font-size: .93em; }
.ws-out-card .ws-go{ margin-top: auto; }
.ws-out-k{ margin: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #8A6D8F; }
.ws-go{
  font: inherit; font-weight: 600; font-size: .98rem; cursor: pointer; min-height: 46px; padding: 10px 18px; border-radius: 999px;
  border: 0; background: #3C3350; color: #FFF8EE; transition: transform .3s var(--ease-out, ease), background-color .3s;
}
.ws-go:hover{ background: #5B4A7A; transform: translateY(-1px); }
.ws-go.is-stamp{ animation: ws-pop .6s var(--ease-out, ease); }
.ws-make:not(.is-ready) #ws-report{ opacity: .6; }
.ws-save-row{ font-size: .92em; color: var(--ink-soft, #524B3E); }
.ws-small{ font-size: .85rem !important; }

/* the sheet editor: a full-height panel, sliding up on phones */
html.ws-locked, html.ws-locked body{ overflow: hidden; }
html.ws-locked .tol-breathe-btn, html.ws-locked .tol-wx{ visibility: hidden; }
.ws-sheet-foot .wpf-btn-quiet{ font: inherit; font-weight: 600; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: transparent; color: var(--ink, #211D17); border: 1px solid var(--ink-soft, #524B3E); cursor: pointer; }
.ws-sheet{ position: fixed; inset: 0; z-index: 40; background: rgba(46,38,60,0); transition: background-color .3s; }
.ws-sheet.is-in{ background: rgba(46,38,60,.35); }
.ws-sheet-panel{
  position: absolute; inset: 3vh 0 0 0; margin: 0 auto; max-width: 980px; display: flex; flex-direction: column;
  background: var(--paper, #F5EFDE); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(46,38,60,.25);
  transform: translateY(100%); transition: transform .38s var(--ease-out, cubic-bezier(.2,.8,.2,1));
}
.ws-sheet.is-in .ws-sheet-panel{ transform: none; }
.ws-sheet-top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px 10px; border-bottom: 1px solid var(--line, #D9CBA3); }
.ws-sheet-code{ margin: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .72rem; color: var(--brass-ink, #7A5620); }
.ws-sheet-title{ margin: .1em 0 0; font-size: 1.35rem; }
.ws-sheet-title:focus{ outline: none; }
.ws-sheet-x{ flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line, #D9CBA3); background: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink, #211D17); }
.ws-sheet-scroll{ flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 20px 30px; }
.ws-sheet-scroll .wpf-table-box{ width: 100%; margin-left: 0; transform: none; }
.ws-sheet-why{ margin: 0 0 .8em; font-style: italic; color: var(--credit, #3E6B4C); }
.ws-sheet-label{ display: block; max-width: 26rem; margin-bottom: 1em; }
.ws-sheet-label span{ display: block; font-size: .82em; font-weight: 600; margin-bottom: 3px; }
.ws-sheet-status{ font-size: .9em; color: var(--ink-soft, #524B3E); }
.ws-sheet-foot{ display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line, #D9CBA3); background: var(--paper-deep, #ECE2C4); }

/* little bursts of bubbles and hearts */
.ws-burst{ position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.ws-burst span{ position: absolute; left: 0; top: 0; animation: ws-fly 1.2s var(--ease-out, ease) both; }
.ws-b-bub{ width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #B9A0E0; background: radial-gradient(circle at 35% 35%, #fff 0 20%, rgba(217,200,240,.35) 22%); }
.ws-b-heart{ color: #E88BA2; font-size: 15px; line-height: 1; }
@keyframes ws-fly{ 0%{ transform: translate(0,0) scale(.4); opacity: 0; } 15%{ opacity: 1; } 100%{ transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }
@keyframes ws-stamp{ 0%{ transform: scale(1); } 35%{ transform: scale(1.3) rotate(-8deg); } 70%{ transform: scale(.94) rotate(3deg); } 100%{ transform: scale(1); } }
@keyframes ws-pop{ 0%{ transform: scale(.7); } 60%{ transform: scale(1.08); } 100%{ transform: scale(1); } }

@media (max-width: 720px){
  .ws-sheet-panel{ inset: 2vh 0 0 0; border-radius: 18px 18px 0 0; }
  .ws-sheet-top, .ws-sheet-scroll, .ws-sheet-foot{ padding-left: 14px; padding-right: 14px; }
  .ws-out{ grid-template-columns: 1fr; }
}
@media (max-width: 440px){
  .ws-paths{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .ws-path{ padding: 10px 11px; border-radius: 16px; }
  .ws-path-icon{ position: static; width: 2em; height: 2em; margin-bottom: 4px; }
  .ws-path-blurb{ font-size: .76em; }
  .ws-names-row{ grid-template-columns: 1fr; }
  .ws-stop{ gap: 10px; }
  .ws-dot{ width: 36px; height: 36px; }
  .ws-stop::before{ left: 17px; top: 36px; }
  .ws-stop-body{ padding: 9px 11px 11px; }
  .ws-sheet-foot .ws-go{ flex: 1; }
}
@media (prefers-reduced-motion: reduce){
  .ws-path, .ws-sheet, .ws-sheet-panel, .ws-sheet-btn, .ws-go, .ws-drop{ transition: none; }
  .ws-stop.is-stamp .ws-dot, .ws-drop.is-stamp, .ws-go.is-stamp, .ws-path.is-on::after{ animation: none; }
}

/* the Suite, promoted on the list of workpapers */
.ws-promo{
  display: block; margin: 1.4em 0 0; padding: 1.1em 1.3em; border-radius: 22px; text-decoration: none; color: var(--ink, #211D17);
  background: linear-gradient(135deg, #FDEEF2 0%, #F6EEF8 55%, #EEF4FA 100%); border: 1px solid #EBD3E4;
  transition: transform .35s var(--ease-out, ease), box-shadow .35s var(--ease-out, ease);
}
.ws-promo:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(120,90,140,.16); }
.ws-promo > span, .ws-promo > strong{ display: block; }
.ws-promo-k{ font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #8A6D8F; }
.ws-promo strong{ font-family: "Fraunces", Georgia, serif; font-size: 1.2em; margin: .2em 0 .3em; }
.ws-promo-go{ margin-top: .5em; font-weight: 600; color: #6B4E8A; }

/* the road, week by week */
.ws-view{ display:inline-flex; gap:4px; padding:4px; margin:0 0 1em; border-radius:999px; background:#F6EEF8; }
.ws-view button{ font:inherit; font-size:.88rem; min-height:40px; padding:6px 14px; border-radius:999px; border:0; background:transparent; color:#4E3F6B; cursor:pointer; }
.ws-view button[aria-pressed="true"]{ background:#fff; box-shadow:0 2px 8px rgba(120,90,140,.15); font-weight:600; }
.ws-weeks{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.ws-week{ margin:0; padding:14px 16px; border-radius:20px; background:#FFFDF7; border:1px solid rgba(60,51,80,.1); }
.ws-week-k{ margin:0; font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--brass-ink, #7A5620); }
.ws .ws-week-h{ margin:.1em 0 .3em; font-size:1.15rem; }
.ws-week-do{ margin:0 0 .7em; color:var(--ink, #211D17); }
.ws-week .ws-sheets{ margin-bottom:.6em; }
.ws-week .ws-along{ margin:0; }

/* ---------- printing: just the worksheet ----------
   The Open / Save draft / PDF bar, "Clear this page" and the add/remove row buttons are for the screen. */
@media print{
  .wpf-bar, .wpf-after, .wpf-clear, .wpf-add, .wpf-remove button, .wpf-table-actions{ display: none !important; }
  .wpf-table tr{ break-inside: avoid; }
}

/* ---------- people (2 to 8) and "Keep a draft on this device" ---------- */
.wpf-person-row{ display: flex; gap: 6px; align-items: center; }
.wpf-person-row input{ flex: 1 1 auto; min-width: 0; }
.wpf-person-x, .ws-name-x{
  flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--line, #D9CBA3); background: #FFFDF6; color: var(--ink-soft, #524B3E);
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.wpf-person-x:hover, .ws-name-x:hover{ border-color: var(--debit, #96412B); color: var(--debit, #96412B); }
.wpf-people-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 0; }
.wpf-people-actions .wpf-help{ margin: 0; }
.wpf-keep{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 0.7em !important; font-size: 0.95em !important; color: var(--ink, #211D17) !important; }
.wpf-keep label{ display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.wpf-keep input{ width: 1.1rem; height: 1.1rem; margin: 0; }
.wpf-erase{ font: inherit; font-size: 0.92em; padding: 3px 12px; border: 1px solid var(--ink-soft, #524B3E); border-radius: 999px; background: #FFFDF6; color: var(--ink, #211D17); cursor: pointer; }
.wpf-erase:hover{ border-color: var(--debit, #96412B); color: var(--debit, #96412B); }
.wpf-keep-note{ flex-basis: 100%; font-size: 0.88em; color: var(--ink-soft, #524B3E); }
.wpf-keep input:focus-visible, .wpf-erase:focus-visible, .wpf-person-x:focus-visible, .ws-name-x:focus-visible{ outline: 2px solid var(--focus, #2B5B8C); outline-offset: 2px; }
.ws-names-row{ grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ws-name-cell{ display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.ws-name-cell label{ flex: 1 1 auto; min-width: 0; }
.ws-lemon{ margin-top: 1em; padding: .6em .9em; border: 1px solid var(--line, #D9CBA3); border-radius: 14px; background: #FFFDF7; }
.ws-lemon > summary{ cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.ws-lemon textarea{ width: 100%; box-sizing: border-box; font: inherit; font-size: .9rem; margin-top: .3em; overflow-wrap: anywhere; }
.ws-lemon-l{ display: block; margin-top: .6em; font-size: .92em; }
.ws-lemon-note:empty{ display: none; }
.ws-name-cell label.ws-kid{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: .9em; white-space: nowrap; }
.ws-names-more{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: .8em 0 0; }
.ws-names-count{ font-size: .88em; color: var(--ink-soft, #524B3E); }
.ws-names-more[hidden]{ display: none; }
.ws-names-note{ margin: .5em 0 0; font-size: .88em; color: var(--ink-soft, #524B3E); }
@media print{
  .wpf-keep, .wpf-person-x, .wpf-people-actions, .ws-name-x, .ws-names-more{ display: none !important; }
}

.wpf-tech{ display: block; margin-top: .25em; font-size: .42em; font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--ink-soft, #524B3E); }

/* ---------- numbers outside their range, word chips, the task library, examples ---------- */
.wpf-form input[aria-invalid="true"]{ border-color: var(--debit, #96412B); background: #FFF4F1; }
.wpf-range{ display: block; margin-top: 4px; font-size: .82em; line-height: 1.35; color: var(--debit, #96412B); }
.wpf-chips{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.wpf-chips-k, .wpf-lib-h{ flex-basis: 100%; margin: 0; font-size: .8em; color: var(--brass-ink, #7A5620); font-family: "IBM Plex Mono", ui-monospace, monospace; }
.wpf-chip{ font: inherit; font-size: .86rem; min-height: 36px; padding: 5px 12px; border-radius: 999px; border: 1px dashed #C9B6DA; background: #fff; color: #4E3F6B; cursor: pointer; }
.wpf-chip:hover{ background: #F3EEF9; border-style: solid; }
.wpf-chip.is-on{ border-style: solid; background: #EAF1E9; border-color: #CFE0CC; color: var(--credit, #3E6B4C); }
.wpf-chip:focus-visible{ outline: 2px solid var(--focus, #2B5B8C); outline-offset: 2px; }
.wpf-lib, .wpf-example{ margin: 12px 0 4px; padding: 8px 12px; border: 1px solid var(--line, #D9CBA3); border-radius: 12px; background: #FFFDF6; }
.wpf-lib summary, .wpf-example summary{ cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.wpf-lib-group{ display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.wpf-example-h{ margin: .8em 0 .3em; font-weight: 600; font-size: .92em; }
.wpf-example-table{ width: 100%; border-collapse: collapse; font-size: .86em; }
.wpf-example-table th, .wpf-example-table td{ text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line, #D9CBA3); vertical-align: top; }
.wpf-example-lines{ margin: .3em 0; padding-left: 1.2em; font-size: .9em; }
.wpf-erase-note{ font-size: .88em; font-weight: 600; color: var(--credit, #3E6B4C); }
.wpf-erase-note:empty{ display: none; }

/* ---------- the suite: one row per person, road choices, saving ---------- */
.ws-people-rows{ display: flex; flex-direction: column; gap: 10px; }
.ws-person-row{ display: flex; flex-direction: column; gap: 6px; }
.ws-person-name{ font-size: .82em; font-weight: 600; color: var(--brass-ink, #7A5620); }
.ws-person-hint, .ws-shared{ margin: 0; font-size: .86em; color: var(--ink-soft, #524B3E); }
.ws-shared{ padding: 6px 10px; border-radius: 10px; background: #F6F1E4; }
.ws-hold-msg{ display: block; font-weight: 600; margin-bottom: 8px; }
.ws-hold-actions{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 400; }
.ws-out-card.is-lead{ margin: 0 0 14px; }
.ws-save-row p{ margin: .4em 0; }
.ws-save-how{ font-size: .92em; }
.ws-sheet-saved{ font-size: .85em; color: var(--ink-soft, #524B3E); }

/* ---------- the suite answers as you choose: steps that wait, a summary of your road, buttons that say what they make ---------- */
.ws-step-body{ transition: opacity .45s ease, filter .45s ease; }
.ws-step.is-locked .ws-step-body{ opacity: .4; filter: grayscale(.4); pointer-events: none; user-select: none; }
.ws-step.is-locked > h2{ color: var(--ink-soft, #524B3E); }
.ws-num{ transition: background-color .45s, color .45s; }
.ws-step.is-locked .ws-num{ background: #E9E3EE; color: #6B6178; }
.ws-step.is-locked .ws-road-empty, .ws-view[hidden]{ display: none; }
.ws .ws-lock-note{
  display: block; width: fit-content; max-width: 100%; box-sizing: border-box;
  margin: .2em 0 .9em; padding: 8px 14px 8px 12px; border-radius: 18px; border: 1px dashed #C9B6DA; background: #FBF8FD;
  color: #4E3F6B; font-size: .92em; line-height: 1.4; box-shadow: none;
}
.ws .ws-lock-note::before{ content: "\2191"; margin-right: 8px; vertical-align: 1px; display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #EBDDF6; font-size: .85em; }
.ws .ws-lock-note[hidden]{ display: none; }
.ws .ws-lock-note:focus{ outline: 2px solid var(--focus, #2B5B8C); outline-offset: 2px; }
.ws-lock-note .ws-link, .fp-mirror-note .ws-link{ position: relative; }
.ws-lock-note .ws-link::after, .fp-mirror-note .ws-link::after{ content: ""; position: absolute; inset: -12px -6px; }

.ws-summary{ margin-top: 1em; padding: .75em .9em .85em; border-radius: 18px; background: #FFFDF7; border: 1px solid rgba(60,51,80,.1); animation: ws-fade .4s ease both; }
.ws-summary[hidden]{ display: none; }
.ws .ws-summary-k{ margin: 0 0 .5em; padding: 0; background: none; box-shadow: none; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #8A6D8F; }
.ws .ws-chips{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; background: none; box-shadow: none; }
.ws .ws-chip-s{
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; max-width: 100%; box-sizing: border-box; margin: 0; padding: 4px 12px;
  border-radius: 999px; background: #F3EEF9; box-shadow: none; color: #3C3350; font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere;
}
.ws .ws-chip-s.is-road{ background: var(--c, #F7CAD4); font-weight: 600; }
.ws-chip-icon{ font-size: 1.05em; }
.ws .ws-chip-s.is-done{ background: #EAF1E9; color: var(--credit, #3E6B4C); font-weight: 600; }
.ws .ws-chip-s.is-quiet{ background: transparent; border: 1px dashed #C9B6DA; color: var(--ink-soft, #524B3E); }
.ws-announce{ position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* step 2: the fillable PDF, one card */
.ws-pdf-text > :last-child{ margin-bottom: .9em; }
.ws-go-wrap{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; }
.ws-go-wrap .ws-go{ margin-top: 0; text-align: center; }
.ws .ws-go-note{ margin: 0; padding: 0 4px; background: none; box-shadow: none; font-size: .84rem; line-height: 1.35; color: var(--ink-soft, #524B3E); }
.ws .ws-go-note:empty{ display: none; }
.ws-go:disabled{ cursor: not-allowed; opacity: .7; transform: none; }
/* step 5: the two reports side by side */
.ws-make .ws-out{ align-items: stretch; }
.ws-make .ws-out-card.is-lead{ margin: 0; background: #F4EEFA; border-color: #E0D0EA; }
.fp-mirror-note{ font-size: .86em; color: var(--ink-soft, #524B3E); }
.fp-mirror-note[hidden]{ display: none; }
@keyframes ws-fade{ from{ opacity: 0; } to{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  .ws-step-body, .ws-num{ transition: none; }
  .ws-summary{ animation: none; }
}
/* small text links in the suite's sentences get a full-size tap area without changing the line */
.ws-drop .ws-link, .ws-save-row .ws-link{ position: relative; }
.ws-drop .ws-link::after, .ws-save-row .ws-link::after{ content: ""; position: absolute; inset: -12px -6px; }
.ws #ws-name-add{ min-height: 44px; }

/* ---------- "Share this list" / "Open a shared list" (One owner per job, the daily check-in) ---------- */
.wpf-share, .wpf-share-in{ margin: 1.4em 0 0; padding: .8em 1em; border: 1px solid var(--line, #D9CBA3); border-radius: 12px; background: #FFFDF6; }
.wpf-share-in{ margin: 0 0 1.4em; border-color: var(--credit, #3E6B4C); background: var(--credit-soft, #E4EDE3); }
.wpf-share-in:focus{ outline: 2px solid var(--focus, #2B5B8C); outline-offset: 2px; }
.wpf-share-h{ margin: 0 0 .2em; font-weight: 600; }
.wpf-share-in p{ margin: 0 0 .5em; }
.wpf-share-btns{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: .5em; }
.wpf-share-btns .wpf-add{ min-height: 44px; }
.wpf-share-panel{ margin-top: .8em; }
.wpf-share-l{ display: block; font-weight: 600; font-size: .92em; margin-bottom: 4px; }
.wpf-share-code{ width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; font-size: .85rem; overflow-wrap: anywhere; word-break: break-all; }
.wpf-share-msg{ margin: 0; padding: .5em .8em; border-radius: 8px; background: #FFF6EC; }
@media print{ .wpf-share, .wpf-share-in{ display: none !important; } }

/* WP-13 on a phone: today's rows first, the rest of the week folded (tol-workpaper.js) */
.wpf-today{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 10px; }
.wpf-today-k{ margin: 0; font-weight: 600; }
.wpf-today-more{ margin: 8px 0 0; font-size: .9rem; color: var(--ink-soft, #524B3E); }
@media print{ .wpf-today, .wpf-today-more{ display: none !important; } }

/* The "A flower was planted in your Night Garden" note (site.js) never covers an open sheet in the Suite */
html.ws-locked .tol-planted{ display: none !important; }

/* Two lists of One owner per job, side by side (tol-suite.js) */
.ws-compare{ margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--paper, #FBF6E9); border: 1px solid var(--line, #D9CBA3); }
.ws-compare summary{ cursor: pointer; font-weight: 600; min-height: 32px; }
.ws-compare-note{ margin: 8px 0; font-size: .9rem; color: var(--ink-soft, #524B3E); }
.ws-compare-h{ margin: 12px 0 4px; font-weight: 700; }
.ws-compare-list{ margin: 0; padding-left: 1.1rem; }
.ws-compare-list li{ margin: 0 0 8px; overflow-wrap: anywhere; }
.ws-compare-sides{ display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.ws-sheet-rm{ margin-left: auto; }
.ws-split{ margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--paper, #FBF6E9); border: 1px dashed var(--line, #D9CBA3); font-size: .95rem; }
.ws-split-t{ margin: 0 0 4px; overflow-wrap: anywhere; }

/* ---------- the form first: a compact top on the fill-in pages ----------
   The notes about privacy, drafts, PDFs and the ideas behind the sheet fold under one "How saving works"
   (tol-workpaper.js, foldHow), so the names and the first rows are on the first screen. */
body[data-wp] main.read > header.read-head{ margin-bottom: .7rem; padding-top: .7rem; padding-bottom: .75rem; }
body[data-wp] main.read > header.read-head h1{ margin-top: .1em; }
body[data-wp] main.read > .wpf-lede:not(.pillar-note){ font-size: .95em; margin-bottom: .6rem; }
.wpf-how{ margin: 0 0 1rem; padding: 0 .9rem; border: 1px solid var(--line, #D9CBA3); border-radius: 14px; background: var(--credit-soft, #E4EDE3); }
.wpf-how > summary{ cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .6em; padding: .35rem 0; font-weight: 600; color: var(--ink, #211D17); }
.wpf-how > summary:focus-visible{ outline: 2px solid var(--focus, #2B5B8C); outline-offset: 2px; border-radius: 8px; }
.wpf-how-s{ font-weight: 400; font-size: .88em; color: var(--ink-soft, #524B3E); }
.wpf-how .wpf-privacy{ margin: .2rem 0 .8rem; padding: .7em .9em; }
.wpf-how .pillar-note{ margin: 0 0 .9rem; padding: 0; background: none; box-shadow: none; border: 0; }
.wpf-how[open]{ padding-bottom: .1rem; }
@media (max-width: 560px){
  body[data-wp] main.read > header.read-head h1{ font-size: 1.55rem; }
  .wpf-meta{ padding: .8em .9em; gap: .7em .9em; }
  /* two people's names side by side on a phone; a third (and the date) on the next line */
  .wpf-meta{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpf-meta > .wpf-field:not(.wpf-person){ grid-column: 1 / -1; }
  .wpf-section{ margin-top: 1.6em; }
}
/* at "Larger" text the names stack again, so nothing is squeezed */
:root.tol-text-xl .wpf-meta, :root.tol-text-xxl .wpf-meta{ grid-template-columns: 1fr; }
@media print{ .wpf-how{ display: none !important; } }

/* "Keep this on this device for next time? Keep it · Not now": one small line in the save bar */
.wpf-keepask{ flex: 1 1 100%; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; }
.wpf-keepask-q{ margin: 0; flex: 1 1 auto; min-width: 0; font-size: .86rem; font-weight: 600; line-height: 1.25; color: var(--ink, #211D17); }
.wpf-bar .wpf-keepask button{ flex: 0 0 auto; min-height: 34px; padding: 4px 12px; font-size: .84rem; border-radius: 999px; white-space: nowrap; }
.wpf-keepask-yes{ background: var(--credit, #3E6B4C); color: #fff; border: 1px solid var(--credit, #3E6B4C); }
.wpf-keepask-no{ background: transparent; color: var(--ink, #211D17); border: 1px solid var(--ink-soft, #524B3E); }
.wpf-keepask button:focus-visible{ outline: 2px solid var(--focus, #2B5B8C); outline-offset: 2px; }

/* "Just tonight's check-in" (WP-13): the 90-second ritual, above the week */
.wpf-tonight{ margin: 1.2em 0 0; padding: .9em 1em 1em; border-radius: 16px; background: #FFF8EE; border: 1px solid #EBCB9B; }
.wpf-tonight > h2{ margin: 0 0 .2em; font-size: 1.2rem; }
.wpf-tonight > .wpf-help{ margin: 0 0 .7em; }
.wpf-tonight-people{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .8em 1.2em; }
.wpf-tonight-one{ margin: 0; padding: .4em .8em .8em; border: 1px solid var(--line, #D9CBA3); border-radius: 12px; background: #FFFDF7; min-width: 0; }
.wpf-tonight-one legend{ font-weight: 700; padding: 0 .3em; }
.wpf-tonight-one .wpf-field + .wpf-field{ margin-top: .5em; }

/* the "×" that removes a row, on a phone: inside the row, with room for its focus ring */
@media (max-width: 720px){
  .wpf-table-box{ overflow-x: visible; }
  .wpf-table tr{ padding-right: 46px; }
  .wpf-table td.wpf-remove{ right: 4px; }
  .wpf-remove button{ width: 36px; height: 36px; }
}
@container wpftable (max-width: 40rem){
  .wpf-table tr{ padding-right: 46px; }
  .wpf-table td.wpf-remove{ right: 4px; }
}

/* sharing: the main "Send it" button, and "Send my changes back" */
.wpf-share-btns .wpf-share-main{ border-style: solid; border-color: var(--credit, #3E6B4C); background: var(--credit, #3E6B4C); color: #fff; font-weight: 600; }
.wpf-share-btns .wpf-share-main:hover{ background: #2F5A3C; }
.wpf-share-new{ font-weight: 600; color: var(--ink, #211D17); }
.wpf-sendback{ margin: 1em 0; }
@media (max-width: 560px){ .wpf-people-help{ display: none; } .wpf-people-actions{ margin-top: .5em; } }
.wpf-howto .wpf-note{ margin: .4em 0 .3em; font-style: normal; }
.wpf-howto + .wpf-example{ margin-top: 6px; }
@media (max-width: 560px){
  /* the sheet's code is in the title and on the PDF; on a phone the heading is just the sheet's name */
  body[data-wp] main.read > header.read-head .read-code{ display: none; }
  body[data-wp] main.read > header.read-head h1{ margin-top: 0; }
  .wpf-people-actions{ display: inline-flex; margin-right: .6em; vertical-align: middle; }
  .wpf-people-actions + .tol-hh-keep{ display: inline-flex; vertical-align: middle; margin-top: .5em; }
}
@media (max-width: 560px){
  body[data-wp] main.read > .wpf-lede:not(.pillar-note){ font-size: .9em; line-height: 1.55; }
  .wpf-how > summary{ font-size: .95em; }
  /* the save bar stays one row on a phone, even at Larger text */
  .wpf-bar-actions.has-more:not(.is-open){ flex-wrap: nowrap; }
  .wpf-bar-actions.has-more:not(.is-open) button{ min-width: 0; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
}

/* "Bring in your Lemonade Stand?": a stand that came in through a link, waiting for a yes */
.ws-lemon-offer{ margin: .8em 0 1em; padding: .9em 1.1em; border-radius: 16px; background: #FFF6D6; border: 1px solid #E9CF7A; }
.ws-lemon-offer p{ margin: 0 0 .5em; }
.ws-lemon-offer:focus{ outline: 2px solid var(--focus, #2B5B8C); outline-offset: 2px; }
.ws-lemon-offer-btns{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ws-lemon-offer-btns .wpf-add{ min-height: 44px; }

/* "Lives here": how often someone is here (Family and Co-parents roads), under their name */
.ws-name-cell:has(.ws-nights){ flex-wrap: wrap; }
.ws-name-cell label.ws-nights{ flex: 1 1 100%; order: 3; display: flex; align-items: center; gap: 8px; font-size: .88em; margin-top: 2px; }
.ws-nights select{ flex: 1 1 auto; min-width: 0; min-height: 40px; font: inherit; border: 1px solid var(--line, #D9CBA3); border-radius: 8px; background: #FFFDF7; padding: 4px 8px; }
.ws-nights select:focus-visible{ outline: 2px solid var(--focus, #2B5B8C); outline-offset: 2px; }
.ws-nights > span{ white-space: nowrap; }
.ws-short-note{ margin: 0 0 1em; padding: .6em .9em; border-radius: 12px; background: #FDEEF2; border: 1px solid #EBD3E4; font-size: .95em; }

/* step 4: a link or code pasted in, no file needed; step 5: the whole road as a link */
.ws-paste{ margin-top: 1em; padding: .8em 1em; border: 1px solid var(--line, #D9CBA3); border-radius: 14px; background: #FFFDF7; }
.ws-paste-l{ display: block; font-weight: 600; }
.ws-paste-sub{ margin: .2em 0 .4em; font-size: .9em; color: var(--ink-soft, #524B3E); }
.ws-paste textarea{ width: 100%; box-sizing: border-box; font: inherit; font-size: .9rem; overflow-wrap: anywhere; }
.ws-paste .wpf-add{ min-height: 44px; }
.ws-paste-note:empty{ display: none; }
.ws-send-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ws-send-row .ws-send{ min-height: 44px; font-weight: 600; border-style: solid; border-color: var(--credit, #3E6B4C); }
.ws-send-note{ font-size: .88em; color: var(--ink-soft, #524B3E); flex: 1 1 16rem; }
@media print{ .ws-paste, .ws-send-row{ display: none !important; } }

/* ---------- phones: a compact save bar (one line of buttons, a small status line) ---------- */
@media (max-width: 560px){
  .wpf-bar{ margin-top: 2em; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .wpf-bar-inner{ gap: 5px 8px; }
  .wpf-bar button{ font-size: .86rem; padding: 6px 10px; min-height: 40px; }
  #wpf-status{ flex: 1 1 100%; font-size: .8rem; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .wpf-keepask-q{ font-size: .8rem; }
  /* while the keep question is showing, the status gets one line, so the bar stays small */
  .wpf-bar-inner:has(.wpf-keepask) #wpf-status{ -webkit-line-clamp: 1; line-clamp: 1; }
  .wpf-bar .wpf-keepask button{ min-height: 32px; padding: 3px 10px; font-size: .8rem; }
}
/* the "Use these names" box under the names: its message gets a line of its own */
.wpf-form .tol-hh-keep{ flex-wrap: wrap; }
.wpf-form .tol-hh-keep .tol-hh-status{ flex: 1 1 100%; }
.wpf-form .tol-hh-keep .tol-hh-status:empty{ display: none; }

/* "Ready-made no's to copy" (WP-01 Part B): tap a card to copy the words */
.wpf-ready{ margin: .6em 0 1.1em; padding: .8em 1em 1em; border-radius: 16px; background: #F7F3FF; border: 1px solid #D6CBEF; }
.wpf-ready-h{ margin: 0 0 .2em; font-weight: 700; font-size: 1.05rem; }
.wpf-ready > .wpf-help{ margin: 0 0 .6em; }
.wpf-ready-group{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 8px; margin: 0 0 .8em; }
.wpf-ready-group > .wpf-lib-h{ grid-column: 1 / -1; margin: .2em 0 0; }
.wpf-ready-chip{ display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; font: inherit; font-size: .92rem; line-height: 1.4; color: var(--ink, #211D17); background: #FFFDF7; border: 1px solid #CDBFEA; border-radius: 12px; padding: 9px 12px; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.wpf-ready-chip:hover{ border-color: #8C74C4; }
.wpf-ready-chip:focus-visible{ outline: 2px solid var(--focus, #2B5B8C); outline-offset: 2px; }
.wpf-ready-ask{ font-weight: 700; font-size: .84rem; color: #5B4A86; }
.wpf-ready-tap{ font-size: .78rem; color: var(--ink-soft, #524B3E); }
.wpf-ready-chip.is-copied{ border-color: var(--credit, #3E6B4C); background: #EEF6EF; }
.wpf-ready-chip.is-copied .wpf-ready-tap::before{ content: "Copied \2713  "; color: var(--credit, #3E6B4C); font-weight: 700; }
.wpf-partb-note{ margin-top: -.3em; }

/* WP-13: the same check-in for a team or housemates */
.wpf-tonight-others{ margin: 0 0 .8em; }
.wpf-tonight-others > summary{ cursor: pointer; font-weight: 600; font-size: .95rem; min-height: 40px; display: flex; align-items: center; gap: .4em; list-style: none; color: var(--credit, #3E6B4C); text-decoration: underline; text-underline-offset: .15em; }
.wpf-tonight-others > summary::-webkit-details-marker{ display: none; }
.wpf-tonight-others > summary::before{ content: "\25B8"; text-decoration: none; display: inline-block; }
.wpf-tonight-others[open] > summary::before{ content: "\25BE"; }
.wpf-tonight-others p{ margin: .3em 0 .5em; }
.wpf-tonight-one select{ width: 100%; }

/* the Workpaper Suite's save bar on a phone: Save my progress and More (Open a saved file, Fillable PDF) */
@media (max-width: 560px){
  .wpf-bar-actions.ws-bar-actions.has-more:not(.is-open) #wpf-pdf{ display: none; }
  .wpf-bar-actions.ws-bar-actions.has-more.is-open #wpf-pdf{ order: 3; flex: 1 1 30%; }
}
/* "Your turn": what was shared, and which sheets are yours */
.ws-turn-list{ list-style: none; margin: 0 0 .6em !important; padding: 0 !important; display: flex; flex-direction: column; gap: 2px; }
.ws-turn-list li{ margin: 0 !important; max-width: none !important; }
.ws-turn-list .ws-link{ text-align: left; min-height: 40px; padding: 4px 0; }
.ws-turn-list .ws-link::before{ content: "\2192  "; text-decoration: none; display: inline-block; margin-right: .3em; }
/* someone else's own sheet, read-only here */
.ws-readonly{ margin: 0 0 1em; padding: .7em 1em; border-radius: 12px; background: #EEF3F8; border: 1px solid #B9CBDD; }
.ws-readonly p{ margin: 0 0 .5em; }
.wpf-form.is-readonly input:disabled, .wpf-form.is-readonly select:disabled, .wpf-form.is-readonly textarea:disabled{ opacity: 1; color: var(--ink, #211D17); background: #F6F2E6; }
.ws-send-private{ margin: .2em 0 0; font-size: .92rem; }
.ws-send-private label{ display: inline-flex; gap: .5em; align-items: flex-start; cursor: pointer; }
.ws-send-private input{ margin-top: .3em; flex: none; }

/* "✓ Saved on this phone": a quiet word in the save bar, hidden while a message is showing */
.wpf-saved{ font-size: .82rem; color: var(--credit, #3E6B4C); flex: 1 1 auto; }
.wpf-saved:empty, #wpf-status:not(:empty) + .wpf-saved{ display: none; }
/* on a phone the save bar steps aside while someone types, so it never covers the box they are in */
.wpf-bar{ transition: transform .18s ease; }
body.wpf-typing .wpf-bar{ transform: translateY(110%); }
@media (prefers-reduced-motion: reduce){ .wpf-bar{ transition: none; } }
/* what differs after combining a shared list, each with a choice */
.wpf-conflicts .wpf-conflict-list{ list-style: none; margin: .4em 0 .6em; padding: 0; }
.wpf-conflicts .wpf-conflict-list li{ padding: .5em 0; border-top: 1px solid var(--line, #D9CBA3); }
.wpf-conflicts .wpf-conflict-q{ margin: 0 0 .35em; overflow-wrap: anywhere; }
.wpf-conflicts .wpf-add{ min-height: 44px; }
.wpf-lib-hint{ margin: .1em 0 .4em; }
@media (max-width: 560px){ .wpf-bar-inner:has(.wpf-keepask) .wpf-saved{ display: none; } }

/* ---------- Six gentle weeks: this week's pages, one week at a time (tol-suite.js renderFlow) ---------- */
.ws-week, .ws-flow{ --c: #DDEFE3; }
.ws-flow{ box-sizing: border-box; margin: 0 0 1.4em; padding: 1em 1.1em 1.1em; border-radius: 22px; background: #FFF8E6; border: 1.5px solid #EAD59E; }
.ws-flow[hidden]{ display: none; }
.ws .ws-flow p{ max-width: none; }
.ws-flow-k{ margin: 0 0 .5em; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .76rem; letter-spacing: .06em; color: var(--brass-ink, #7A5620); }
.ws-flow-k a{ color: inherit; }
.ws-flow-weeks{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .6em; }
.ws-flow-pill{ display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 999px; border: 1px solid #D9CBA3; background: #FFFDF7; color: #2B2620; font: 600 .95rem/1 "IBM Plex Mono", ui-monospace, monospace; cursor: pointer; }
.ws-flow-pill.is-done{ background: #DDEFE3; border-color: #8CC7A5; }
.ws-flow-pill[aria-pressed="true"]{ border: 2px solid #3C3350; background: #3C3350; color: #FFF8EE; }
.ws .ws-flow h2{ margin: .1em 0 .25em; font-size: 1.3rem; line-height: 1.25; }
.ws-flow h2:focus{ outline: none; }
.ws-flow h2:focus-visible{ outline: 3px solid var(--focus, #2B5B8C); outline-offset: 2px; }
.ws-flow-note{ margin: 0 0 .6em; color: var(--ink-soft, #524B3E); }
.ws-flow-sub{ margin: .3em 0 .35em; font-weight: 600; }
.ws-flow .ws-sheets{ margin-bottom: .7em; }
.ws-flow .ws-along{ margin: 0 0 .6em; }
.ws-flow-small{ font-size: .9rem; color: var(--ink-soft, #524B3E); }
.ws-flow-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: .5em 0 .2em; }
.ws-flow-row .wpf-add, .ws-flow-pdfs .wpf-add{ min-height: 44px; border-radius: 999px; }
.ws-flow-a{ display: inline-flex; align-items: center; text-decoration: none; }
.ws-flow-done.is-done{ background: #3E6B4C; }
.ws-flow-status{ min-height: 1.3em; margin: .2em 0 .4em; font-weight: 600; color: var(--credit, #3E6B4C); }
.ws-flow-save{ margin-top: .4em; padding-top: .6em; border-top: 1px dashed #EAD59E; }
.ws-flow-save p{ margin: .3em 0; }
.ws-flow-keep{ display: inline-flex; align-items: center; gap: .45em; min-height: 44px; font-weight: 600; cursor: pointer; }
.ws-flow-keep input{ width: 1.2rem; height: 1.2rem; accent-color: #3E6B4C; }
.ws-flow-pdfs{ display: flex; flex-wrap: wrap; gap: 8px; }
.ws-flow :focus-visible{ outline: 3px solid var(--focus, #2B5B8C); outline-offset: 2px; }
@media print{ .ws-flow{ display: none !important; } }

/* The daily check-in: the week, folded away under "Just tonight" (tol-workpaper.js, foldWeek) */
.wpf-weekfold{ margin: 1.2rem 0 0; padding: 0 .9rem; border: 1px solid var(--line, #D9CBA3); border-radius: 14px; background: #FFFDF7; }
.wpf-weekfold > summary{ cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .6em; padding: .45rem 0; font-weight: 600; color: var(--ink, #211D17); }
.wpf-weekfold > summary:focus-visible{ outline: 2px solid var(--focus, #2B5B8C); outline-offset: 2px; border-radius: 8px; }
.wpf-weekfold-s{ font-weight: 400; font-size: .88em; color: var(--ink-soft, #524B3E); }
.wpf-weekfold[open]{ padding-bottom: .8rem; }
@media print{ .wpf-weekfold{ border: 0; padding: 0; } .wpf-weekfold > summary{ display: none; } }
.wpf-tonight > .wpf-share-btns{ margin-top: .8em; }
/* a date written out in words next to its box: "Sun 11 Oct 2026" */
.wpf-date-say{ display: block; font-size: .85rem; color: var(--ink-soft, #524B3E); margin-top: .15em; }
.wpf-date-say:empty{ display: none; }
/* "✓ Saved on this phone · Forget it" in the save bar */
.wpf-forget{ font: inherit; font-size: 1em; background: none; border: 0; padding: 0 .2em; min-height: 32px; color: var(--credit, #3E6B4C); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.wpf-forget:focus-visible{ outline: 2px solid var(--focus, #2B5B8C); outline-offset: 2px; border-radius: 4px; }
/* "Keep: [Ade] [Ben]" after combining a shared list */
.wpf-conflict-k{ align-self: center; font-weight: 600; margin-right: .2em; }
.wpf-fridge{ margin: 0 0 1rem; }
.wpf-weekfold > summary{ list-style: none; }
.wpf-weekfold > summary::-webkit-details-marker{ display: none; }
.wpf-weekfold-t::before{ content: "\25B8\00a0"; display: inline-block; }
.wpf-weekfold[open] .wpf-weekfold-t::before{ content: "\25BE\00a0"; }

/* Big tap buttons for the owner and the bad-day backup (?for=good-bad-days): one tap, no drop-down */
.wpf-tap{ display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.wpf-tap-b{ font: inherit; font-size: .95rem; min-height: 44px; min-width: 44px; padding: 6px 14px; border-radius: 999px; border: 2px solid #C9B6DA; background: #fff; color: #3A2E52; cursor: pointer; }
.wpf-tap-b[aria-pressed="true"]{ background: #E6DAF3; border-color: #3A2E52; font-weight: 600; }
.wpf-tap-b[aria-pressed="true"]::before{ content: "\2713\0020"; }
.wpf-tap-b:focus-visible{ outline: 3px solid #2F6FB0; outline-offset: 2px; }
.wpf-tap-b[hidden]{ display: none; }
select.wpf-tap-sel{ position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
/* the raw link and code, folded under the share buttons */
.wpf-share-raw{ margin: 8px 0 0; }
.wpf-share-raw > summary{ cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; color: #2F6FB0; text-decoration: underline; }
.wpf-share-raw[open] > summary{ margin-bottom: 6px; }
.wpf-safe{ margin: 4px 0 10px; color: #5B4A6E; }

/* ---------- "Print this form" (wpf-print.js): the printout is the form and nothing else ---------- */
@media print{
  /* a single workpaper: the title and the form; no menus, notes, privacy box, tool guide or save bar */
  body[data-wp] > *:not(main){ display: none !important; }
  body[data-wp] main.read > *:not(.read-head):not(#wpf-root){ display: none !important; }
  /* suggestions are for the screen: word chips, the task library and the filled-in examples */
  .wpf-chips, .wpf-lib, .wpf-example, .wpf-print-btn{ display: none !important; }
  /* the Workpaper Suite: with a sheet open, print just that sheet */
  body:has(#ws-sheet:not([hidden])) > *:not(#ws-sheet){ display: none !important; }
  .ws-sheet:not([hidden]){ position: static !important; inset: auto !important; background: none !important; }
  .ws-sheet:not([hidden]) .ws-sheet-panel{ position: static !important; inset: auto !important; transform: none !important; max-height: none !important; height: auto !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; display: block !important; }
  .ws-sheet:not([hidden]) .ws-sheet-scroll{ overflow: visible !important; padding: 0 !important; }
  .ws-sheet:not([hidden]) .ws-sheet-top{ padding: 0 0 8px !important; }
  .ws-sheet-x, .ws-sheet-foot, .ws-sheet-status:empty{ display: none !important; }
}