/* Shadeland internal app - Tasks (the Asana replacement). Built 29/09/2026.
   Uses the brand tokens defined in styles.css; adds no colour of its own except the three
   state colours below, which are UI signals and never brand colours.
   Every rule is scoped under .tk so it cannot leak into the show tool or the price finder. */

.tk{--tk-bad:#B42318;--tk-bad-bg:#FDE7E5;--tk-warn-bg:#FFF3CC;--tk-ok-bg:#E3F4EA;
  padding:12px 16px calc(96px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px}
:is(.tk,.tk-scope) [hidden]{display:none!important}
:is(.tk,.tk-scope) h1{font-family:Anton,Impact,sans-serif;text-transform:uppercase;color:var(--navy);font-weight:400;
  font-size:28px;letter-spacing:.3px;margin:0;line-height:1.05}
:is(.tk,.tk-scope) .tk-sub{color:var(--muted);font-size:14px;margin:4px 0 0}
:is(.tk,.tk-scope) label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 4px;letter-spacing:.03em}

/* Three equal sections (My list, Team, More), never a strip that scrolls off the screen. 29/10/2026. */
.tk-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:var(--paper);
  border:1px solid var(--line);border-radius:14px}
.tk-seg button{border:0;background:transparent;color:var(--ink);border-radius:10px;padding:8px 6px;font:inherit;
  font-size:15px;font-weight:600;min-height:42px;cursor:pointer}
.tk-seg button[aria-pressed="true"]{background:var(--navy);color:var(--white)}

/* Hidden from sight, still there for screen readers and for the photo picker. */
.tk-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Quick add, top of My list. */
.tk-quick{display:flex;gap:8px}
.tk-quick input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;font-size:16px;background:var(--white)}
.tk-quick .tk-btn{flex:0 0 auto;border:0;padding-left:18px;padding-right:18px}

/* Folded groups: one line with the count until opened. */
.tk-fold>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;font-weight:600;color:var(--navy);min-height:48px}
.tk-fold>summary::-webkit-details-marker{display:none}
.tk-fold>summary::after{content:"Show";font-size:12px;font-weight:600;color:var(--blue);margin-left:10px}
.tk-fold[open]>summary::after{content:"Hide"}
.tk-fold>summary>span:first-child{flex:1}
.tk-fold .tk-count{background:var(--paper);border-radius:999px;padding:2px 10px;font-size:13px;color:var(--ink)}
.tk-fold[open]>summary{margin-bottom:6px}
.tk-link-btn{background:none;border:0;color:var(--blue);font:inherit;font-weight:600;padding:6px 0;cursor:pointer;align-self:flex-start;min-height:40px}

/* The More screen: four big rows. */
.tk-morerow{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:var(--white);border:0;
  border-top:1px solid var(--line);padding:14px 16px;font:inherit;color:inherit;cursor:pointer;min-height:64px}
.tk-morerow:first-child{border-top:0}
.tk-morerow b{color:var(--navy);font-size:16px}
.tk-morerow span{color:var(--muted);font-size:13px}

/* A task: who, when and which group on its face. */
.tk-qe{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tk-qe .tk-field:last-child{grid-column:1 / -1}
.tk-qe label{display:flex;gap:6px;align-items:center;min-height:24px}
:is(.tk,.tk-scope) .tk-photo-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border:2px dashed var(--line);
  border-radius:12px;background:var(--paper);color:var(--navy);font-weight:600;font-size:15px;cursor:pointer;
  letter-spacing:0;margin:0;position:relative}
.tk-photo-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tk-summary-link{cursor:pointer;font-weight:600;color:var(--navy);min-height:32px}
.tk-sheet-foot{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));background:var(--white);
  padding:10px 0 calc(6px + env(safe-area-inset-bottom,0px));margin-bottom:calc(-20px - env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}

/* Tidy my list, 29/10/2026: the prompt on My list, and one row per old task with three buttons. */
.tk-tidy-card{display:flex;flex-direction:column;gap:10px;background:var(--tk-warn-bg);border-radius:var(--radius);padding:14px}
.tk-tidy-card b{display:block;color:var(--ink);font-size:16px}
.tk-tidy-card span{display:block;color:var(--ink);font-size:14px;margin-top:2px}
.tk-tidy-card .tk-btn{align-self:flex-start}
.tk-tidyrow{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-top:1px solid var(--line)}
.tk-tidyrow:first-child{border-top:0}
.tk-tidybtns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tk-tidybtns .tk-btn{min-height:44px;padding:8px 4px;font-size:14px;border:1px solid var(--line)}

/* Team: who is stuck, in words. */
.tk-why{font-size:14px;color:var(--ink);line-height:1.45}

.tk-banner{font-size:13px;border-radius:10px;padding:8px 12px;background:var(--paper);color:var(--muted)}
.tk-banner.bad{background:var(--tk-bad-bg);color:var(--tk-bad)}
.tk-banner.warn{background:var(--tk-warn-bg);color:var(--warn)}

.tk-summary{display:flex;flex-wrap:wrap;gap:6px}
.tk-pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 10px;font-size:12px;
  font-weight:600;background:var(--paper);color:var(--ink);white-space:nowrap;border:0}
.tk-pill.bad{background:var(--tk-bad-bg);color:var(--tk-bad)}
.tk-pill.warn{background:var(--tk-warn-bg);color:var(--warn)}
.tk-pill.ok{background:var(--tk-ok-bg);color:var(--ok)}
.tk-pill.src{background:transparent;border:1px dashed var(--line);color:var(--muted);font-weight:500}
button.tk-pill{cursor:pointer;border:1px solid var(--line)}

.tk-group{display:flex;flex-direction:column;gap:6px}
.tk-group h2{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:600;display:flex;justify-content:space-between}
.tk-list{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tk-row{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-top:1px solid var(--line)}
.tk-row:first-child{border-top:0}
.tk-tick{flex:0 0 28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--white);
  cursor:pointer;margin-top:1px;display:grid;place-items:center;padding:0}
.tk-tick.on{background:var(--ok);border-color:var(--ok)}
.tk-tick.on::after{content:"";width:10px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.tk-open{flex:1;min-width:0;background:none;border:0;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer;
  display:flex;flex-direction:column;gap:5px}
.tk-title{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.tk-row.done .tk-title{text-decoration:line-through;color:var(--muted)}
.tk-meta{display:flex;flex-wrap:wrap;gap:5px}
.tk-empty{background:var(--white);border:1px dashed var(--line);border-radius:var(--radius);padding:16px;color:var(--muted);font-size:14px}
.tk-note{background:var(--paper);border-radius:var(--radius);padding:12px 14px;font-size:13px;color:var(--muted)}
.tk-note strong{color:var(--ink)}

.tk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.tk-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-align:left;
  font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;gap:10px;width:100%}
.tk-card .nm{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.tk-card .nm b{font-size:16px}
.tk-card .nm span{font-size:12px;color:var(--muted)}
.tk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-variant-numeric:tabular-nums}
.tk-stats div{display:flex;flex-direction:column}
.tk-stats b{font-size:20px;line-height:1.1}
.tk-stats span{font-size:11px;color:var(--muted)}
.tk-stats .bad b{color:var(--tk-bad)} .tk-stats .warn b{color:var(--warn)}
.tk-back{background:none;border:0;color:var(--blue);font:inherit;font-weight:600;padding:0;cursor:pointer;align-self:flex-start;min-height:32px}

.tk-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tk-toolbar input,.tk-toolbar select{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:16px;background:var(--white);min-height:40px}
.tk-kv{display:grid;grid-template-columns:92px 1fr;gap:3px 10px;font-size:13px;align-items:center}
.tk-kv .k{color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.tk-kv .v{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0;overflow-wrap:anywhere}

.tk-fab{position:fixed;right:max(16px,calc(50% - 364px));bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:31;
  background:var(--navy);color:var(--white);border:0;border-radius:999px;padding:14px 18px;font:inherit;font-weight:600;
  box-shadow:var(--shadow);cursor:pointer}

.tk-back-drop{position:fixed;inset:0;background:rgba(6,18,26,.45);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.tk-sheet{background:var(--white);width:100%;max-width:760px;max-height:92dvh;overflow-y:auto;border-radius:20px 20px 0 0;
  padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.tk-sheet h3{margin:0;font-size:19px;color:var(--navy);overflow-wrap:anywhere}
.tk-grab{width:44px;height:5px;border-radius:5px;background:var(--line);align-self:center}
.tk-field{display:flex;flex-direction:column;gap:6px}
.tk-field input,.tk-field select,.tk-field textarea{border:1px solid var(--line);border-radius:12px;padding:11px 12px;font:inherit;font-size:16px;background:var(--paper);width:100%}
.tk-btns{display:flex;gap:8px;flex-wrap:wrap}
.tk-btns button{flex:1;min-height:var(--tap);border:0;border-radius:12px;font:inherit;font-weight:600;cursor:pointer;padding:0 14px}
.tk-btn{background:var(--navy);color:var(--white);border:0;border-radius:12px;font:inherit;font-weight:600;cursor:pointer;min-height:var(--tap);padding:0 14px}
.tk-btn.ghost{background:var(--paper);color:var(--ink)}
.tk-btn[disabled]{opacity:.5;cursor:default}
.tk-comment{background:var(--paper);border-radius:12px;padding:10px 12px;font-size:14px;overflow-wrap:anywhere;white-space:pre-wrap}
.tk-comment b{font-weight:600}
.tk-comment .when{color:var(--muted);font-size:12px;margin-left:6px}
.tk-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400;color:var(--ink);letter-spacing:0;margin:0}
.tk-check input{width:22px;height:22px;flex:0 0 22px;accent-color:var(--navy);margin-top:1px}
.tk-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.tk-photos a{display:block}
.tk-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
.tk-files{display:flex;flex-direction:column;gap:6px;font-size:14px}
.tk-files a{color:var(--blue);font-weight:600;overflow-wrap:anywhere}
.tk-err{color:var(--tk-bad);font-size:13px}
.tk-private{border:1px solid var(--yellow);background:var(--tk-warn-bg);border-radius:12px;padding:10px 12px;font-size:13px}
:is(.tk,.tk-scope) a.tk-link{color:var(--blue);font-weight:600;overflow-wrap:anywhere}
.tk-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(140px + env(safe-area-inset-bottom,0px));
  background:var(--ink);color:var(--white);padding:10px 16px;border-radius:999px;font-size:13px;z-index:50;max-width:90vw}

/* Registers and sail programmes: a spreadsheet you can scroll sideways inside its own box,
   so the page itself never scrolls sideways on a phone. Added 01/10/2026. */
.tk-grid{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);max-width:100%}
.tk-grid table{border-collapse:separate;border-spacing:0;font-size:13px;min-width:100%}
.tk-grid th,.tk-grid td{padding:9px 10px;border-top:1px solid var(--line);text-align:left;vertical-align:top;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.tk-grid thead th{border-top:0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--paper)}
.tk-grid tbody th{position:sticky;left:0;background:var(--white);font-weight:600;color:var(--ink);white-space:normal;min-width:140px;max-width:200px;box-shadow:1px 0 0 var(--line)}
.tk-grid thead th:first-child{position:sticky;left:0;z-index:1}
.tk-grid tbody tr{cursor:pointer}
.tk-grid tbody tr:hover td,.tk-grid tbody tr:focus td{background:var(--paper)}
.tk-grid tbody tr:focus{outline:2px solid var(--navy);outline-offset:-2px}
.tk-grid tr.done th,.tk-grid tr.done td{color:var(--muted)}
.tk-grid tr.done th{text-decoration:line-through}
.tk-sublink{background:none;border:0;color:var(--blue);font:inherit;font-size:13px;font-weight:600;padding:0;cursor:pointer;align-self:flex-start;min-height:32px;text-align:left}

/* Search, 29/10/2026: one box under the three section buttons, on My list and Team. 16px text so
   a phone does not zoom in; the browser's own clear cross is hidden so there is only ours. */
.tk-find{position:relative;display:flex;align-items:center}
.tk-find input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px 48px 12px 40px;
  font:inherit;font-size:16px;background:var(--white);color:var(--ink);min-height:48px;-webkit-appearance:none;appearance:none}
.tk-find input:focus{outline:2px solid var(--navy);outline-offset:-1px}
.tk-find input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.tk-find-icon{position:absolute;left:12px;color:var(--muted);pointer-events:none}
.tk-find-x{position:absolute;right:4px;width:40px;height:40px;border:0;border-radius:50%;background:var(--paper);
  color:var(--ink);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}