/* Curation Den — the green app. Runs inside wp-admin and on its own page.
 *
 * Every colour is a token on :root, never a literal below this block. Two
 * reasons that matters. One, dark mode is then a second palette rather than a
 * second stylesheet. Two, pieces that live outside #cc-app — the toast is
 * appended to <body> — used to reach for variables that were not in scope and
 * came out unreadable. On :root, everything can see them.
 */

:root{
  --g:#1f6f52;          /* brand green: buttons, links, the active nav item */
  --g-hover:#18523d;
  --g-d:#12271f;        /* the deep green the sidebar is cut from */
  --g-l:#e8f1ec;        /* the palest green: notes, ok pills */
  --g-line:#c3d8cd;     /* green-tinted border for ghost buttons */
  --g-on:#ffffff;       /* text on top of --g */

  --ink:#12271f;        /* body text */
  --mute:#6b7a73;       /* second-rank text */
  --faint:#9aa9a1;      /* third-rank: attribution, timestamps */
  --line:#e3e8e5;       /* card and table borders */
  --row:#eef2f0;        /* the hairline between rows */
  --bg:#f4f6f5;         /* page */
  --card:#ffffff;       /* card and table surfaces */
  --well:#fafcfb;       /* row hover, inset panels */
  --field:#ffffff;      /* input background */
  --field-line:#cfdad4;
  --focus:#6fd3a5;

  --late:#a3282d;   --late-bg:#fbeaea;  --late-ink:#7d2226;
  --won-bg:#d6ecdf; --lost-bg:#f7d9da; --gone-bg:#e4e8e6;   /* a whole row, by what they said */
  --warn:#b4820a;   --warn-bg:#fdf3dd;  --warn-ink:#835f07;
  --ok:#1f6f52;
  --pill:#eef2f0;   --pill-ink:#41544b;
  --mutepill:#f1f4f2; --mutepill-ink:#7c8b83;

  --side-ink:#cfe0d7;   /* sidebar text */
  --side-dim:#7fa392;
  --side-hl:#6fd3a5;    /* the bright accent on the sidebar */
  --side-line:rgba(255,255,255,.09);

  --toast:#12271f;      --toast-ink:#ffffff;
  --scrim:rgba(10,25,19,.5);
  --shadow:0 8px 24px rgba(0,0,0,.24);
  --card-shadow:0 18px 50px rgba(0,0,0,.28);

  --dot:#d7ded9;  --dot-on:#1f9d68;  --dot-today:#c8d6cd;
}

/* Dark. Not the light palette inverted — the greens are lifted so they still
   read as green against a dark ground, and the surfaces separate by lightness
   rather than by borders, which is how depth works when there is no light. */
:root[data-cc-theme="dark"]{
  --g:#4fb488;
  --g-hover:#63c99b;
  --g-d:#0b1310;
  --g-l:#162c23;
  --g-line:#2c4b3d;
  --g-on:#08120d;

  --ink:#e4ede8;
  --mute:#95a79e;
  --faint:#71837a;
  --line:#25322c;
  --row:#212d27;
  --bg:#0f1714;
  --card:#161f1b;
  --well:#1b2622;
  --field:#111a16;
  --field-line:#2d3b34;
  --focus:#4fb488;

  --late:#f08a8f;   --late-bg:#3a1e20;  --late-ink:#f5aeb1;
  --won-bg:#1b3a2d; --lost-bg:#44262a; --gone-bg:#29302c;
  --warn:#e6b64a;   --warn-bg:#3a2f16;  --warn-ink:#efcb78;
  --ok:#4fb488;
  --pill:#22302a;   --pill-ink:#a9bcb2;
  --mutepill:#1e2925; --mutepill-ink:#8b9c93;

  --side-ink:#bcd2c6;
  --side-dim:#6f9384;
  --side-hl:#4fb488;
  --side-line:rgba(255,255,255,.07);

  --toast:#22302a;   --toast-ink:#e4ede8;
  --scrim:rgba(0,0,0,.66);
  --shadow:0 8px 28px rgba(0,0,0,.55);
  --card-shadow:0 18px 50px rgba(0,0,0,.6);

  --dot:#2d3b34;  --dot-on:#4fb488;  --dot-today:#3c5148;
}

.cc-wrap{margin:0 0 0 -20px;background:var(--bg);min-height:calc(100vh - 32px)}
.cc-boot{padding:40px;color:var(--mute);font-size:14px}
#cc-app{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink)}
#cc-app *{box-sizing:border-box}
.cc-shell{display:flex;align-items:stretch;min-height:calc(100vh - 32px);background:var(--bg)}

/* sidebar */
.cc-side{width:212px;flex:0 0 212px;background:var(--g-d);color:var(--side-ink);padding:18px 0;display:flex;flex-direction:column}
.cc-brand{padding:0 18px 16px;border-bottom:1px solid var(--side-line);margin-bottom:10px}
.cc-brand b{display:block;color:#fff;font-size:16px;letter-spacing:-.01em}
.cc-brand span{display:block;font-size:11px;color:var(--side-dim);margin-top:2px;letter-spacing:.06em;text-transform:uppercase}
.cc-nav{list-style:none;margin:0;padding:0}
.cc-nav li{margin:0}
.cc-nav button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:0;
  color:var(--side-ink);text-align:left;padding:9px 18px;font-size:13.5px;cursor:pointer;font-family:inherit}
.cc-nav button:hover{background:rgba(255,255,255,.06);color:#fff}
.cc-nav button.on{background:var(--g);color:var(--g-on);font-weight:600;box-shadow:inset 3px 0 0 var(--side-hl)}
.cc-nav .cc-pip{background:var(--side-hl);color:#0d2119;border-radius:9px;padding:1px 7px;font-size:11px;font-weight:700}
/* The projects fold. A heading, not a destination — quieter than the items it
   opens, because pressing it goes nowhere. The body is a grid row animating
   from 0fr to 1fr, which is the one way to slide open to a height nobody
   measured in advance. */
.cc-nav .cc-group{margin:6px 0 2px}
.cc-nav .cc-grouphead{display:flex;align-items:center;gap:7px;width:100%;background:none;border:0;
  color:var(--side-dim);text-align:left;padding:7px 18px;cursor:pointer;font-family:inherit;
  text-transform:uppercase;letter-spacing:.07em;font-size:10.5px;font-weight:700}
.cc-nav .cc-grouphead:hover{color:#fff;background:none}
.cc-groupname{flex:1}
.cc-groupn{background:rgba(255,255,255,.1);border-radius:9px;padding:1px 6px;font-size:10px;
  letter-spacing:0;color:var(--side-ink)}
.cc-chev{display:inline-flex;transition:transform .22s ease}
.cc-group.open .cc-chev{transform:rotate(90deg)}

.cc-groupbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease}
.cc-group.open .cc-groupbody{grid-template-rows:1fr}
.cc-groupbody > .cc-subnav{overflow:hidden;min-height:0;list-style:none;margin:0;padding:0}
.cc-subnav button{padding-left:34px;font-size:13px;position:relative}
/* A hairline the children hang from, so the fold reads as one thing. */
.cc-subnav button::before{content:'';position:absolute;left:22px;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.12)}
.cc-subnav button.on::before{background:var(--side-hl)}
/* A coloured project turns that hairline into its own stripe — same place,
   same idea, but now it tells you which project without being read. */
.cc-subnav button.col::before{width:3px;left:21px;border-radius:2px;background:var(--pc);
  box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.cc-subnav button.col.on::before{background:var(--pc)}

.cc-side-foot{margin-top:auto;padding:12px 12px 0;border-top:1px solid var(--side-line);
  font-size:11px;color:var(--side-dim)}
.cc-side-who{padding:0 6px 8px}
.cc-side-who span{display:block;opacity:.65;margin-top:1px}
.cc-side-acts{display:flex;gap:4px;flex-wrap:wrap}
.cc-sidebtn{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.06);border:0;
  border-radius:6px;color:var(--side-ink);padding:5px 9px;font-size:11px;font-weight:600;
  cursor:pointer;font-family:inherit;line-height:1.4}
.cc-sidebtn:hover{background:rgba(255,255,255,.14);color:#fff}
.cc-sidebtn svg{flex:0 0 auto}

/* On the sign-in and waiting screens there is no sidebar to put it in. */
.cc-theme-float{position:fixed;top:16px;right:16px;z-index:99997;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff}
.cc-theme-float:hover{background:rgba(255,255,255,.22)}

/* main */
.cc-main{flex:1;min-width:0;padding:20px 24px 60px;background:var(--bg);
  animation:cc-in .22s ease both}
@keyframes cc-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Everything that responds to a pointer says so, at the same speed. */
.cc-btn,.cc-nav button,.cc-tabs button,.cc-sidebtn,.cc-hit,.cc-pill,
#cc-app input,#cc-app select,#cc-app textarea{transition:background-color .14s ease,
  border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease}
.cc-btn:active{transform:translateY(1px)}
.cc-card{transition:border-color .16s ease}
table.cc-t tbody tr{transition:background-color .12s ease}

/* One focus ring everywhere, and only for keyboards. */
#cc-app button:focus-visible,#cc-app a:focus-visible,#cc-app input:focus-visible,
#cc-app select:focus-visible,#cc-app textarea:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px}
.cc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.cc-h1{font-size:22px;font-weight:700;margin:0;letter-spacing:-.01em;color:var(--ink)}
.cc-sub{font-size:13px;color:var(--mute);margin-top:3px}
.cc-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.cc-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px}
.cc-card h3{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--ink)}
.cc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin-bottom:14px}
.cc-tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  text-align:left;font-family:inherit;width:100%}
.cc-tile b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.cc-tile span{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}
.cc-tile.late b{color:var(--late)} .cc-tile.warn b{color:var(--warn)} .cc-tile.ok b{color:var(--ok)}
/* A tile you can open says so by lifting under the pointer. */
button.cc-tile{cursor:pointer;transition:border-color .12s,transform .12s}
button.cc-tile:hover{border-color:var(--g);transform:translateY(-1px)}
button.cc-tile:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

table.cc-t{width:100%;border-collapse:collapse;font-size:13px;color:var(--ink)}
table.cc-t th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);
  font-weight:600;padding:0 8px 7px;border-bottom:1px solid var(--line)}
table.cc-t td{padding:7px 8px;border-bottom:1px solid var(--row);vertical-align:middle}
table.cc-t tr:last-child td{border-bottom:0}
table.cc-t tbody tr:hover{background:var(--well)}
.cc-name{font-weight:600;color:var(--ink)}
.cc-firm{color:var(--mute);font-size:12px}
/* Attribution: quieter than the firm line, because it answers a question you
   only ask sometimes — who put this here, and when. */
.cc-by{color:var(--faint);font-size:11px;margin-top:2px}
table.cc-t td .cc-pill{margin:1px 2px 1px 0}

.cc-pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap;
  background:var(--pill);color:var(--pill-ink)}
.cc-pill.late{background:var(--late-bg);color:var(--late)}
.cc-pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.cc-pill.ok{background:var(--g-l);color:var(--g)}
.cc-pill.mute{background:var(--mutepill);color:var(--mutepill-ink)}
.cc-lock{color:var(--mute);font-style:italic}
table.cc-t td.cc-done{text-decoration:line-through;color:var(--faint)}

.cc-btn{background:var(--g);color:var(--g-on);border:1px solid var(--g);border-radius:7px;padding:6px 13px;font-size:13px;
  font-weight:600;cursor:pointer;font-family:inherit;line-height:1.5}
.cc-btn:hover{background:var(--g-hover);border-color:var(--g-hover);color:var(--g-on)}
.cc-btn.ghost{background:var(--card);color:var(--g);border-color:var(--g-line)}
.cc-btn.ghost:hover{background:var(--g-l);color:var(--g)}
.cc-btn.danger{background:var(--card);color:var(--late);border-color:var(--late);border-color:color-mix(in srgb,var(--late) 45%,transparent)}
.cc-btn.danger:hover{background:var(--late-bg);color:var(--late)}
.cc-btn.sm{padding:3px 9px;font-size:12px}
.cc-btn:disabled{opacity:.5;cursor:not-allowed}
/* Dialogs are appended to <body>, outside #cc-app, so every one of these has to
   name the modal too — otherwise fields and labels inside a dialog fall back to
   whatever the page happens to say, which is how a label once came out with no
   colour at all and read as blank. */
#cc-app input[type=text],#cc-app input[type=date],#cc-app input[type=number],#cc-app input[type=email],
#cc-app input[type=tel],#cc-app input[type=url],#cc-app select,#cc-app textarea,
.cc-modal-box input[type=text],.cc-modal-box input[type=date],.cc-modal-box input[type=number],
.cc-modal-box input[type=email],.cc-modal-box input[type=tel],.cc-modal-box input[type=url],
.cc-modal-box select,.cc-modal-box textarea{
  border:1px solid var(--field-line);border-radius:7px;padding:5px 9px;font-size:13px;
  background:var(--field);color:var(--ink);font-family:inherit;max-width:100%}
#cc-app input:focus,#cc-app select:focus,#cc-app textarea:focus,
.cc-modal-box input:focus,.cc-modal-box select:focus,.cc-modal-box textarea:focus{
  outline:2px solid var(--focus);outline-offset:1px;border-color:var(--g)}
#cc-app input::placeholder,#cc-app textarea::placeholder,
.cc-modal-box input::placeholder{color:var(--faint)}
#cc-app label,.cc-modal-box label{font-size:12px;color:var(--mute);display:block;margin-bottom:3px}
/* A checkbox and its sentence read as one line, at body weight — a setting is
   a statement you agree with, not a field label. */
#cc-app label.cc-check,.cc-modal-box label.cc-check{font-size:13px;color:var(--ink);
  display:flex;align-items:flex-start;gap:8px;margin:0;line-height:1.45}
#cc-app label.cc-check input,.cc-modal-box label.cc-check input{margin:2px 0 0;flex:0 0 auto}
.cc-modal-box label.cc-check span{color:var(--mute)}
.cc-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.cc-row>div{min-width:150px}
.cc-grow{flex:1}

/* Refresh, and the answer to "is what I am looking at current?" */
.cc-sync{display:flex;align-items:center;gap:8px}
.cc-sync-when{font-size:11.5px;color:var(--mute);white-space:nowrap}

/* ------------------------------------------------------------------- to do */
/* A list you tick, not a table you administer. Big hit areas, no edit mode —
   click the words and they become a field. */
.cc-todo{list-style:none;margin:0 0 4px;padding:0}
.cc-todo-item{display:flex;align-items:flex-start;gap:11px;padding:11px 6px;border-radius:8px;
  transition:background-color .12s ease;
  border-bottom:1px solid var(--row)}
.cc-todo-item:last-child{border-bottom:0}
.cc-todo-item:hover{background:var(--well)}
.cc-todo-item:hover .cc-todo-x{opacity:1}
/* The thing to be done reads first and reads clearly — it is the only part of
   the row anybody is actually here for. */
.cc-todo-text{flex:1;min-width:0;font-size:15px;line-height:1.4;padding-top:1px;
  color:var(--ink);font-weight:550;letter-spacing:-.005em}

/* The project, small and out of the reading line. Its colour marks it; its
   size keeps it from competing with the task. */
.cc-todo-proj{flex:0 0 auto;align-self:center;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 8px;border-radius:5px;cursor:pointer;white-space:nowrap;
  background:var(--pc-soft,var(--well));color:var(--pc,var(--mute));
  border:1px solid var(--pc-edge,var(--line));transition:background-color .12s ease}
.cc-todo-proj:hover{background:var(--pc-edge,var(--g-l))}
.cc-todo-item.done .cc-todo-proj{opacity:.45}
.td_title{cursor:text;border-radius:4px;padding:1px 3px;margin:-1px -3px;display:inline-block}
.td_title:hover{background:var(--well);box-shadow:inset 0 0 0 1px var(--line)}
.cc-todo-item.done .cc-todo-text{color:var(--faint);text-decoration:line-through}

/* The to-do tick. Named apart from .cc-check on purpose: that one is a
   checkbox with a sentence beside it, this one is a 19px button, and when they
   shared a name every settings label was squashed into a 19px box. */
.cc-tick{flex:0 0 auto;width:19px;height:19px;margin-top:1px;border-radius:6px;cursor:pointer;
  border:1.6px solid var(--field-line);background:var(--field);color:#fff;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:background-color .14s ease,border-color .14s ease,transform .1s ease}
.cc-tick:hover{border-color:var(--g)}
.cc-tick:active{transform:scale(.9)}
.cc-tick.on{background:var(--g);border-color:var(--g)}

.cc-todo-x{flex:0 0 auto;background:none;border:0;color:var(--faint);cursor:pointer;padding:3px;
  border-radius:5px;opacity:0;transition:opacity .14s ease,color .14s ease,background-color .14s ease}
.cc-todo-x:hover{color:var(--late);background:var(--late-bg)}
.cc-todo-x:focus-visible{opacity:1}

.cc-todo-edit{width:100%;border:1px solid var(--g);border-radius:6px;padding:3px 7px;
  font-size:13.5px;font-family:inherit;background:var(--field);color:var(--ink)}
.cc-todo-add{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.cc-todo-add input{flex:1;border:1px solid var(--field-line);border-radius:7px;padding:7px 11px;
  font-size:13.5px;font-family:inherit;background:var(--field);color:var(--ink)}
.cc-tabs button.on .cc-firm{color:inherit;opacity:.7}

.cc-todo-tags{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:3px}
.cc-todo-tags .cc-by{margin:0}
.cc-todo-lock{flex:0 0 auto;color:var(--faint);padding:3px;display:inline-flex;cursor:help}
.cc-todo-add #td_proj{max-width:150px}
.cc-todo-add select{border:1px solid var(--field-line);border-radius:7px;padding:7px 9px;
  font-size:13px;font-family:inherit;background:var(--field);color:var(--ink)}
/* The calendar button with the real date field hidden underneath it. */
.cc-datepick{position:relative;display:inline-flex}
.cc-datepick input[type=date]{position:absolute;inset:0;opacity:0;width:100%;height:100%;
  border:0;padding:0;pointer-events:none}

/* --------------------------------------------------------- the wide board */
/* Two dozen columns will not fit anyone's screen, so the table scrolls inside
   its card and whichever columns you pin stay put while the rest goes past. */
.cc-wide{overflow:auto;max-height:calc(100vh - 230px);min-height:200px}
/* The header row stays put while the rows scroll under it. This only works
   because the box above has a height of its own to scroll inside: sticky is
   relative to the nearest scrolling box, and with no height limit that box
   never scrolled, so the header had nothing to stick to. */
table.cc-board{min-width:100%;width:max-content}
table.cc-board th,table.cc-board td{white-space:nowrap;vertical-align:middle}
/* Every cell starts on the same line. With the middle of the cell as the
   reference, a tall name cell (name, code, who added them) pushed its own
   field up while the plain ones beside it sat in the centre, and the row read
   as crooked. The first line is level now, and what is extra hangs below it. */
table.cc-board tbody td{vertical-align:top;line-height:34px;padding-top:7px;padding-bottom:7px}
table.cc-board tbody td .cc-firm,table.cc-board tbody td .cc-by,table.cc-board tbody td small{
  display:block;line-height:1.35}
table.cc-board tbody td .cc-pill{line-height:1.5;vertical-align:middle}
table.cc-board tbody td input,table.cc-board tbody td select{line-height:normal}
table.cc-board tbody td .cc-btn{line-height:1.2;vertical-align:middle}
table.cc-board tbody td input.b_f,table.cc-board tbody td input.d_f,
table.cc-board tbody td select.b_f,table.cc-board tbody td select.d_f{height:34px;box-sizing:border-box}
table.cc-board td .b_f{width:100%;min-width:90px}
table.cc-board td input[type=date].b_f{min-width:135px}
/* Pinned columns and the sticky header. Both must be opaque or whatever moves
   underneath shows through them. Written strongly enough that no wrapper
   further out can blank them again. */
table.cc-board thead th,
.cc-front table.cc-board thead th{position:sticky;top:0;z-index:3;background:var(--card)}
table.cc-board td.cc-stick,table.cc-board th.cc-stick,
.cc-front table.cc-board td.cc-stick,.cc-front table.cc-board th.cc-stick{
  position:sticky;z-index:2;background:var(--card)}
table.cc-board thead th.cc-stick,
.cc-front table.cc-board thead th.cc-stick{z-index:4}
table.cc-board tbody tr:hover td.cc-stick,
.cc-front table.cc-board tbody tr:hover td.cc-stick{background:var(--well)}
/* Where the frozen part ends: a clear bar down the right of the last frozen
   column, and a line under the header so the frozen top reads as one. */
/* Drawn as a bar on the cell rather than as a shadow or a border: a border
   does not travel with a pinned cell, and a shadow is painted over by the
   cells beside it. This stays on the edge and on top. */
table.cc-board td.cc-stick-edge,table.cc-board th.cc-stick-edge{box-shadow:9px 0 12px -7px rgba(0,0,0,.35)}
table.cc-board td.cc-stick-edge::after,table.cc-board th.cc-stick-edge::after{
  content:"";position:absolute;top:0;bottom:0;right:-2px;width:4px;background:var(--g);pointer-events:none}
table.cc-board thead th{box-shadow:0 2px 0 var(--g-line,var(--line))}
table.cc-board thead th.cc-stick-edge{box-shadow:0 2px 0 var(--g-line,var(--line)),9px 0 12px -7px rgba(0,0,0,.35)}

/* Find in this project */
.cc-find{min-width:190px;max-width:260px;border:1px solid var(--field-line);border-radius:7px;
  padding:6px 10px;font-size:13px;font-family:inherit;background:var(--field);color:var(--ink)}
.cc-find:focus{outline:2px solid var(--g-line);outline-offset:0}
.cc-findcount{white-space:nowrap}
.cc-board td.cc-stick .cc-name{white-space:normal}

/* The bar above the board: what is showing, and the tools. The filtering
   itself lives in the headers, where the columns are. */
.cc-boardbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.cc-boardcount{flex:1}
.cc-boardbar .cc-btn{display:inline-flex;align-items:center;gap:5px}

/* Everyone / Only mine reads as one switch with two sides. */
.cc-seg{display:inline-flex;border:1px solid var(--g-line);border-radius:7px;overflow:hidden}
.cc-seg button{background:var(--card);border:0;color:var(--g);font-size:12px;font-weight:600;
  padding:4px 11px;cursor:pointer;font-family:inherit;transition:background-color .14s ease,color .14s ease}
.cc-seg button:hover{background:var(--g-l)}
.cc-seg button.on{background:var(--g);color:var(--g-on)}

/* A funnel on every header — the filter for a column, where the column is.
   Used by the board and by the Master directory alike. */
table.cc-board thead th,table.cc-filterable thead th{position:relative;padding-right:26px}
.cc-thlabel{vertical-align:middle}

/* The header itself is the sort control — press it to cycle A→Z, Z→A, off. */
.cc-thsort{background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;
  color:inherit;letter-spacing:inherit;text-transform:inherit;display:inline-flex;
  align-items:center;gap:4px;border-radius:4px;transition:color .14s ease}
.cc-thsort:hover{color:var(--g)}
.cc-thsort.on{color:var(--g)}
.cc-arrow{font-size:8px;line-height:1}
.cc-filt{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;border-radius:5px;padding:3px;cursor:pointer;color:var(--faint);
  opacity:0;transition:opacity .14s ease,color .14s ease,background-color .14s ease}
table.cc-board thead th:hover .cc-filt,
table.cc-filterable thead th:hover .cc-filt,
.cc-filt:focus-visible{opacity:1}
.cc-filt:hover{color:var(--g);background:var(--g-l)}
.cc-filt.on,.cc-filt.open{opacity:1;color:var(--g);background:var(--g-l)}

/* And a pencil beside it on any column whose choices are a list somebody set,
   so the list is edited where it is used rather than from a separate screen. */
.cc-pencil{position:absolute;right:24px;top:50%;transform:translateY(-50%);
  background:none;border:0;border-radius:5px;padding:3px;cursor:pointer;color:var(--faint);
  opacity:0;transition:opacity .14s ease,color .14s ease,background-color .14s ease}
table.cc-board thead th.has-edit{padding-right:46px}
table.cc-board thead th:hover .cc-pencil,.cc-pencil:focus-visible{opacity:1}
.cc-pencil:hover{color:var(--g);background:var(--g-l)}

/* On a touch screen there is no hover, so they simply stay visible. */
@media (hover:none){.cc-filt,.cc-pencil{opacity:.55}}

/* The little panel it opens. Fixed, so the table's own scrolling cannot clip it. */
.cc-pop{position:fixed;z-index:99997;width:250px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);padding:10px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  animation:cc-pop .14s ease both}
.cc-pop-head{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:7px}
.cc-pop-q{width:100%;border:1px solid var(--field-line);border-radius:6px;padding:5px 8px;
  font-size:12.5px;font-family:inherit;background:var(--field);color:var(--ink);margin-bottom:7px}
.cc-pop-acts{display:flex;gap:10px;margin-bottom:6px}
.cc-pop-acts .cc-link{font-size:11.5px}
.cc-pop-list{max-height:210px;overflow:auto;border:1px solid var(--line);border-radius:7px;padding:3px}
.cc-pop-row{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:5px;cursor:pointer;
  font-size:12.5px;color:var(--ink);margin:0}
.cc-pop-row:hover{background:var(--well)}
.cc-pop-row input{flex:0 0 auto;margin:0}
.cc-pop-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-pop-row i{color:var(--faint)}
.cc-pop-none{padding:10px;font-size:12.5px;color:var(--mute)}
.cc-pop-foot{display:flex;gap:7px;justify-content:flex-end;margin-top:9px}

/* Full screen: the board takes the window, sidebar and all. */
.cc-shell.cc-hidechrome > .cc-side{display:none}
.cc-shell.cc-hidechrome > .cc-main{padding:0}
.cc-fullwrap{min-height:100vh;padding:16px 18px 22px;background:var(--bg)}
.cc-fullhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
.cc-fullwrap .cc-boardcard{margin:0}
.cc-fullwrap .cc-wide{max-height:calc(100vh - 190px)}

/* One column per line, each saying in words whether it is on. A tick alone
   left people guessing which way round it meant. */
.cc-colbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 8px}
.cc-colbar .cc-firm{margin-left:auto}
/* A role that has been set: settled, with a way to change it on purpose. */
.cc-locked{display:inline-flex;align-items:center;gap:6px}
.cc-locked > span{font-weight:600;color:var(--ink)}
.b_unlock{background:none;border:0;color:var(--faint);cursor:pointer;padding:3px;border-radius:5px;
  display:inline-flex;transition:color .14s ease,background-color .14s ease}
.b_unlock:hover{color:var(--g);background:var(--g-l)}

/* Picking projects to assign to. Was a run of inline labels that ran together. */
.cc-picklist{border:1px solid var(--line);border-radius:9px;max-height:230px;overflow:auto;margin-top:4px}
.cc-pickrow{display:flex!important;align-items:center;gap:10px;padding:9px 12px;margin:0!important;
  border-bottom:1px solid var(--row);cursor:pointer;font-size:13px;color:var(--ink)}
.cc-pickrow:last-child{border-bottom:0}
.cc-pickrow:hover{background:var(--well)}
.cc-pickrow.on{background:var(--g-l)}
.cc-pickrow input{flex:0 0 auto;margin:0!important}
.cc-pickname{flex:1;color:var(--ink)}
.cc-pickcode{font-size:11px;color:var(--mute);letter-spacing:.04em;white-space:nowrap}

.cc-collist{max-height:44vh;overflow:auto;border:1px solid var(--line);border-radius:9px}
.cc-colrow{display:flex!important;align-items:center;gap:9px;padding:7px 10px;margin:0!important;
  border-bottom:1px solid var(--row);font-size:13px;color:var(--ink)}
.cc-colrow:last-child{border-bottom:0}
.cc-colrow:hover{background:var(--well)}
.cc-colrow input[type=checkbox],.cc-colrow input[type=radio]{flex:0 0 auto;margin:0!important}
.cc-colname{flex:1;color:var(--ink)}
.cc-colstate{font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap;min-width:64px;text-align:right}
.cc-colrow.off .cc-colname{color:var(--faint);text-decoration:line-through}
.cc-colrow.off .cc-colstate{color:var(--faint)}
.cc-colrow.locked{opacity:.75}

/* Arranging the board: move, rename, show, remove — all on one line. */
.cc-colmove{display:flex;flex-direction:column;gap:1px;flex:0 0 auto}
.cc-colmove button{background:none;border:0;color:var(--faint);cursor:pointer;font-size:8px;
  line-height:1;padding:2px 3px;border-radius:3px;font-family:inherit}
.cc-colmove button:hover:not(:disabled){color:var(--g);background:var(--g-l)}
.cc-colmove button:disabled{opacity:.25;cursor:default}
.cc-colrow .cl_label{flex:1;min-width:0;border:1px solid transparent;border-radius:6px;
  padding:5px 8px;font-size:13px;font-family:inherit;background:transparent;color:var(--ink)}
.cc-colrow .cl_label:hover{border-color:var(--line);background:var(--field)}
.cc-colrow .cl_label:focus{border-color:var(--g);background:var(--field)}
.cc-colrow.off .cl_label{color:var(--faint)}
.cc-coltype{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap;min-width:66px;text-align:right}
.cc-colshow{display:flex!important;align-items:center;gap:6px;margin:0!important;font-size:11px;
  color:var(--mute);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
  min-width:76px;cursor:pointer}
.cc-colrow .cl_del{background:none;border:0;color:var(--faint);cursor:pointer;padding:4px;
  border-radius:5px;display:inline-flex;flex:0 0 auto}
.cc-colrow .cl_del:hover{color:var(--late);background:var(--late-bg)}
.cc-colgap{width:22px;flex:0 0 auto}

/* ------------------------------------------------------- projects & colour */
/* A colour code earns its keep by being findable without reading. So the
   colour is a band down the edge of a row and a filled chip around the code —
   both of which you can pick out of a full screen — never a small bead that
   you have to already be looking at to see. The colour rides on --pc. */

/* The code, wearing the colour. All three palette colours are dark enough
   for white text, so this stays readable whichever one is picked. */
/* --pc is the colour, --pc-on readable ink for text on it, --pc-soft a wash
   pale enough to sit behind a whole row. All three are worked out in JS from
   whatever colour was chosen, so any colour stays legible. */
.cc-ptag{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--pc,var(--faint));
  color:var(--pc-on,#fff);font-size:11.5px;font-weight:650;letter-spacing:.02em;line-height:1.55;
  white-space:nowrap;border:0;font-family:inherit}
button.cc-ptag{cursor:pointer;transition:filter .12s ease,transform .12s ease}
button.cc-ptag:hover{filter:brightness(1.14);transform:translateY(-1px)}
.cc-ptag.plain{background:transparent;color:var(--muted);border:1px solid var(--line);font-weight:600}

/* A row that belongs to a project takes the colour on its leading edge and a
   wash of it across the whole row, so a mixed list groups itself by eye
   without any one row shouting. */
tr.cc-pcol > td{background:var(--pc-soft,transparent)}
tr.cc-pcol > td:first-child{border-left:4px solid var(--pc,transparent);padding-left:12px}
tr.cc-pcol:hover > td{background:var(--pc-edge,var(--well))}

/* A heading that belongs to a project. */
.cc-head.col{border-left:5px solid var(--pc,transparent);border-radius:3px;padding-left:14px}

/* ------------------------------------------------------------ bulk select */
/* The tick column is narrow and never grows, so it does not eat width from
   the sheet it sits in front of. */
.cc-tickcol{width:38px;min-width:38px;text-align:center;padding-left:10px;padding-right:6px}
.cc-tickcol input[type=checkbox]{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--g)}
table.cc-board tbody tr.picked > td{background:var(--g-l)}
table.cc-board tbody tr.picked > td:first-child{box-shadow:inset 3px 0 0 var(--g)}

/* The bar only exists while something is selected, so it can afford to be
   solid — it is the answer to "I have chosen these, now what". */
.cc-bulkbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--g);color:var(--g-on);border-radius:10px;padding:10px 16px;margin-bottom:12px}
.cc-bulkbar b{font-size:13.5px;font-weight:650}
.cc-bulkbar .cc-btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);color:#fff}
.cc-bulkbar .cc-btn:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.4);color:#fff}
.cc-bulkbar .cc-btn.danger{background:var(--late);border-color:var(--late);color:#fff}
.cc-bulkbar .cc-btn.danger:hover{filter:brightness(1.1)}
.cc-bulkbar .cc-btn.ghost{background:none;border-color:rgba(255,255,255,.32);color:#fff}

/* A bar across the very top of a project's screen. The first thing drawn and
   the first thing seen — you know which project you opened before you read. */
.cc-pbar{height:4px;border-radius:999px;background:var(--pc);margin-bottom:14px}

/* The colour a project is wearing, shown on the button that changes it. */
.cc-swatchdot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--pc);
  border:1px solid var(--line);margin-right:2px;vertical-align:-1px;flex:0 0 auto}

.cc-swatches{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.cc-swatch{height:32px;padding:0 14px;border-radius:9px;border:2px solid transparent;cursor:pointer;
  color:#fff;font:inherit;font-size:12px;font-weight:650;letter-spacing:.01em;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.cc-swatch:hover{transform:translateY(-1px)}
.cc-swatch.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--card) inset}
.cc-swatch.none{background:var(--well);border:1px dashed var(--field-line);color:var(--muted)}
.cc-swatch.none.on{border:2px solid var(--ink)}

/* The way out of the named nine. The native picker does the choosing; this is
   the button it hides behind so it sits in the row like the others. */
.cc-swatch-any{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;
  border-radius:9px;border:2px dashed var(--field-line);cursor:pointer;position:relative;
  font-size:12px;font-weight:650;color:var(--muted);background:var(--well);margin:0}
.cc-swatch-any:hover{border-color:var(--g);color:var(--g)}
.cc-swatch-any.on{border-style:solid;border-color:var(--ink);color:var(--ink)}
.cc-swatch-any input[type=color]{width:20px;height:20px;padding:0;border:1px solid var(--line);
  border-radius:5px;background:none;cursor:pointer;flex:0 0 auto}
.cc-swatch-any input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.cc-swatch-any input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}

/* The date everybody keeps in their head, at the top of its dashboard. */
.cc-when{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--g);
  border-radius:10px;padding:14px 18px;margin-bottom:14px}
.cc-when b{font-size:15px;color:var(--ink)}
.cc-countdown{font-size:20px;font-weight:700;color:var(--g);white-space:nowrap;letter-spacing:-.01em}
/* With a colour set, the countdown card is that project's through and through
   — the edge and the number both, not the app's green wearing a coloured trim. */
.cc-when.col{border-left-color:var(--pc)}
.cc-when.col .cc-countdown{color:var(--pc)}

/* A confirmed name reads green the whole way across. */
table.cc-board tbody tr.won > td,table.cc-board tbody tr.won > td.cc-stick{background:var(--won-bg)}
table.cc-board tbody tr.lost > td,table.cc-board tbody tr.lost > td.cc-stick{background:var(--lost-bg)}
table.cc-board tbody tr.gone > td,table.cc-board tbody tr.gone > td.cc-stick{background:var(--gone-bg)}
table.cc-board tbody tr.won:hover > td,table.cc-board tbody tr.lost:hover > td,
table.cc-board tbody tr.gone:hover > td{filter:brightness(.97)}
/* A bar down the left of the row says the same thing without colour. */
table.cc-board tbody tr.won > td:first-child{box-shadow:inset 5px 0 0 var(--g)}
table.cc-board tbody tr.lost > td:first-child{box-shadow:inset 5px 0 0 var(--late)}
table.cc-board tbody tr.gone > td:first-child{box-shadow:inset 5px 0 0 var(--faint)}
table.cc-board tbody tr.won .cc-name{color:var(--g)}
table.cc-board tbody tr.lost .cc-name{color:var(--late-ink)}
table.cc-board tbody tr.lost > td,table.cc-board tbody tr.gone > td{color:var(--mute)}
/* The fields in a coloured row let the colour through instead of sitting on it
   as white boxes. */
table.cc-board tbody tr.won input,table.cc-board tbody tr.won select,
table.cc-board tbody tr.lost input,table.cc-board tbody tr.lost select,
table.cc-board tbody tr.gone input,table.cc-board tbody tr.gone select{background:transparent}

/* Notes kept against a person. */
.cc-notelog{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:9px;margin-top:10px}
.cc-noteitem{padding:10px 12px;border-bottom:1px solid var(--row)}
.cc-noteitem:last-child{border-bottom:0}

/* ------------------------------------------------------ project by project */
/* Numbers in columns so the eye can run down them, and a zero that stays out
   of the way — the point of the table is where the numbers are NOT zero. */
.cc-roll th.n,.cc-roll td.n{text-align:center;width:88px;white-space:nowrap}
.cc-roll td.n{font-variant-numeric:tabular-nums;font-size:14px}
.cc-roll .cc-zero{color:var(--faint);font-weight:400}
.cc-roll b.bad{color:var(--late)} .cc-roll b.warn{color:var(--warn)} .cc-roll b.good{color:var(--g)}
.cc-rollcard{padding-bottom:6px}

/* ------------------------------------------------------------- the day board */
/* Its own screen inside To do, so it gets the room a month needs. */
.cc-calcard{padding-bottom:14px}
.cc-calhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.cc-calhead .cc-tools select{max-width:190px}
.cc-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cc-weekdays div{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);padding-left:4px}
.cc-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cc-day{min-height:92px;border:1px solid var(--line);border-radius:9px;padding:6px;
  background:var(--card);cursor:pointer;overflow:hidden;transition:border-color .14s ease,background-color .14s ease}
.cc-day:hover{border-color:var(--g);background:var(--well)}
.cc-day.out{opacity:.45}
.cc-day.today{border-color:var(--g);box-shadow:inset 0 0 0 1px var(--g)}
.cc-daynum{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;
  font-weight:700;color:var(--mute);margin-bottom:4px}
.cc-day.today .cc-daynum span:first-child{background:var(--g);color:var(--g-on);border-radius:50%;
  width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center}
.cc-daycount{font-weight:600;color:var(--faint);font-size:10px}
.cc-dayevent{font-size:10px;font-weight:700;color:#fff;background:var(--g);border-radius:4px;
  padding:2px 5px;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-daytask{font-size:11px;line-height:1.35;background:var(--well);border-radius:5px;padding:3px 5px;
  margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-left:2px solid var(--warn);color:var(--ink)}
.cc-daytask:hover{background:var(--g-l)}
.cc-daytask.done{border-left-color:var(--g);color:var(--faint);text-decoration:line-through}
/* A to do written against a project wears that project down its edge. */
.cc-daytask[data-pc]{border-left:3px solid var(--pc);background:var(--pc-soft,var(--well))}
.cc-daytask[data-pc]:hover{background:var(--pc-edge,var(--g-l))}
.cc-daywho{font-weight:700;color:var(--mute)}
.cc-daychat{color:var(--g);font-weight:700}
.cc-daymore{font-size:10.5px;color:var(--mute);padding-left:4px}
.cc-dayrow{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.cc-dayrow:hover{background:var(--well)}
@media (max-width:782px){
  .cc-day{min-height:64px}
  .cc-daytask,.cc-dayevent{display:none}
}

/* --------------------------------------------------------------- dropdowns */
.cc-droplist{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.cc-dropcol label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mute);margin-bottom:5px}
.cc-dropcol textarea{width:100%;font-family:inherit;font-size:13px;line-height:1.6;resize:vertical}
.cc-dropcol .cc-link{font-size:11.5px;margin-top:5px}

/* ------------------------------------------------------------ the activity log */
/* A stream of sentences under day headings, not a table. With n users this is
   read by scanning, so the eye needs a shape to follow: time, kind, sentence. */
.cc-log{padding:6px 0}
.cc-logday{position:sticky;top:0;z-index:1;background:var(--card);padding:9px 16px 6px;
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);
  border-bottom:1px solid var(--row)}
.cc-logrow{display:flex;align-items:flex-start;gap:11px;padding:9px 16px;
  border-bottom:1px solid var(--row);font-size:13px;line-height:1.5}
.cc-logrow:last-child{border-bottom:0}
.cc-logrow:hover{background:var(--well)}
.cc-logtime{flex:0 0 auto;width:40px;color:var(--faint);font-size:11.5px;
  font-variant-numeric:tabular-nums;padding-top:1px}
.cc-logtext{flex:1;min-width:0;color:var(--mute)}
.cc-logwho{font-weight:600;color:var(--ink)}
.cc-logtext .cc-by{margin-top:1px}

/* The kind of change, colour-coded so a run of one sort is obvious at a glance. */
.cc-logcat{flex:0 0 auto;min-width:64px;text-align:center;font-size:10px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;border-radius:20px;padding:2px 8px;margin-top:1px;
  background:var(--pill);color:var(--pill-ink)}
.cc-logcat.people{background:var(--g-l);color:var(--g)}
.cc-logcat.board{background:#e6efff;color:#2a5aa8}
.cc-logcat.access{background:var(--warn-bg);color:var(--warn-ink)}
.cc-logcat.projects{background:#efe6ff;color:#6141a8}
.cc-logcat.todo{background:#e6f7f2;color:#1f7a5e}
.cc-logcat.system{background:var(--mutepill);color:var(--mutepill-ink)}
:root[data-cc-theme="dark"] .cc-logcat.board{background:#1b2740;color:#8fb4f0}
:root[data-cc-theme="dark"] .cc-logcat.projects{background:#291f40;color:#b79cf0}
:root[data-cc-theme="dark"] .cc-logcat.todo{background:#16302a;color:#6fd3a5}

/* ------------------------------------------------------------------- bell */
.cc-bell{position:relative;background:none;border:1px solid transparent;border-radius:7px;
  color:var(--mute);cursor:pointer;padding:4px 6px;display:inline-flex;align-items:center;
  transition:color .14s ease,background-color .14s ease,border-color .14s ease}
.cc-bell:hover{color:var(--g);background:var(--g-l)}
.cc-bell.has{color:var(--g)}
.cc-bell-n{position:absolute;top:-2px;right:-3px;background:var(--late);color:#fff;
  font-size:9.5px;font-weight:700;line-height:1;border-radius:9px;padding:2px 4px;min-width:14px;text-align:center}
@keyframes cc-ring{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-11deg)}80%{transform:rotate(9deg)}90%{transform:rotate(-5deg)}}
.cc-bell.has svg{animation:cc-ring 2.4s ease-in-out 1}

.cc-notes{list-style:none;margin:0;padding:0;max-height:340px;overflow:auto}
.cc-note-row{padding:10px 12px;border-radius:8px;border:1px solid var(--line);margin-bottom:7px;
  background:var(--card);cursor:pointer;transition:border-color .14s ease,background-color .14s ease}
.cc-note-row:hover{border-color:var(--g);background:var(--well)}
.cc-note-row.fresh{border-left:3px solid var(--g);background:var(--g-l)}
.cc-note-t{font-size:13px;font-weight:600;color:var(--ink)}
.cc-note-b{font-size:12.5px;color:var(--mute);margin-top:2px;line-height:1.45}

/* Export straight to a spreadsheet, above the table it exports. */
.cc-export{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.cc-export .cc-firm{flex:1;min-width:120px}

/* Type-ahead over the Master: results sit under the box they came from. */
.cc-hits{border:1px solid var(--line);border-radius:9px;margin-top:10px;max-height:270px;overflow:auto;background:var(--card)}
.cc-hit{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;border-bottom:1px solid var(--row)}
.cc-hit:last-child{border-bottom:0}
.cc-hit:hover{background:var(--well)}
.cc-hits-none{margin-top:10px;padding:11px 12px;border-radius:9px;background:var(--well);
  border:1px solid var(--line);font-size:13px;color:var(--mute)}
#dnew{margin-top:10px}
.cc-newform{border:1px solid var(--line);border-radius:10px;padding:16px;margin-top:4px;background:var(--well)}
.cc-newform h3{margin:0 0 4px;font-size:14px;font-weight:700}

/* A record laid out to be read, not scanned — approvals, mostly. */
.cc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 18px;margin:10px 0 4px}
.cc-fact{min-width:0}
.cc-fact dt{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin:0 0 2px}
.cc-fact dd{margin:0;font-size:13px;color:var(--ink);word-break:break-word}
.cc-fact dd a{color:var(--g)}
.cc-fact.empty dd{color:var(--faint)}

/* Something available but not in the way — troubleshooting, mostly. */
.cc-details > summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--ink);list-style:none}
.cc-details > summary::-webkit-details-marker{display:none}
.cc-details > summary::before{content:'▸ ';color:var(--mute);font-weight:400}
.cc-details[open] > summary::before{content:'▾ '}
.cc-details > summary:hover{color:var(--g)}

/* The "why is this empty?" list: prose, not a form. */
.cc-why{margin:0;padding:0 0 0 18px;font-size:13px;color:var(--mute);line-height:1.6}
.cc-why li{margin-bottom:8px}
.cc-why li:last-child{margin-bottom:0}
.cc-why b{color:var(--ink)}
.cc-why .cc-link{font-size:13px}

.cc-empty{padding:26px 4px;color:var(--mute);font-size:13.5px}
.cc-empty b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
.cc-note{background:var(--g-l);border-left:3px solid var(--g);border-radius:0 7px 7px 0;padding:9px 12px;
  font-size:12.5px;color:var(--ink);margin-bottom:12px}
.cc-note.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn-ink)}
.cc-err{background:var(--late-bg);border-left:3px solid var(--late);border-radius:0 7px 7px 0;padding:9px 12px;
  font-size:13px;color:var(--late-ink);margin-bottom:12px;line-height:1.6}
.cc-err code{background:rgba(0,0,0,.08);border-radius:4px;padding:1px 5px;font-size:12px}

/* Messages stack upward from the corner and slide away when they are done. */
.cc-toasts{position:fixed;right:22px;bottom:22px;z-index:99999;display:flex;flex-direction:column;
  gap:8px;align-items:flex-end;pointer-events:none}
.cc-toast{background:var(--toast);color:var(--toast-ink);padding:11px 16px;border-radius:9px;
  font-size:13px;box-shadow:var(--shadow);max-width:340px;pointer-events:auto;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  animation:cc-toast-in .26s cubic-bezier(.2,.9,.3,1.2) both}
.cc-toast.out{animation:cc-toast-out .26s ease forwards}
.cc-toast.bad{background:var(--late);color:#fff}
@keyframes cc-toast-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes cc-toast-out{to{opacity:0;transform:translateX(14px)}}

/* Confirming a speaker is the good day in this job. */
.cc-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:100000}

/* Saving on a board is constant, so it whispers rather than announces. */
.cc-hint{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);
  background:var(--toast);color:var(--toast-ink);border-radius:20px;padding:5px 14px;
  font-size:12px;font-weight:600;box-shadow:var(--shadow);z-index:99999;
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.cc-hint.on{opacity:1;transform:translateX(-50%) translateY(0)}
@keyframes cc-saved{from{background:var(--g-l)}to{background:transparent}}
table.cc-board tbody tr.saved > td{animation:cc-saved .9s ease}
table.cc-board tbody tr.saving{opacity:.7}
.cc-modal{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;
  z-index:99998;padding:20px;animation:cc-fade .16s ease both}
.cc-modal-box{background:var(--card);color:var(--ink);border-radius:12px;padding:20px;width:min(560px,100%);
  max-height:86vh;overflow:auto;box-shadow:var(--card-shadow);
  animation:cc-pop .2s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes cc-fade{from{opacity:0}to{opacity:1}}
@keyframes cc-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* A count on a light tab, where the sidebar's bright pip would shout. */
.cc-pip.dark{background:var(--mutepill);color:var(--mutepill-ink);font-weight:700}
.cc-modal-box h3{margin:0 0 4px;font-size:17px;color:var(--ink)}
.cc-modal-box .cc-sub{margin-bottom:14px}
.cc-modal-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.cc-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.cc-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:7px 12px;font-size:13.5px;
  color:var(--mute);cursor:pointer;font-family:inherit;margin-bottom:-1px}
.cc-tabs button.on{color:var(--g);border-bottom-color:var(--g);font-weight:600}
/* Inside a project, the live tab is underlined in that project's own colour
   rather than the app's green — so even the tab strip tells you where you are.
   It sits after the rule above on purpose: same weight, later wins. */
.cc-tabs.col button.on{color:var(--pc);border-bottom-color:var(--pc)}
.cc-spin{display:inline-block;width:13px;height:13px;border:2px solid var(--g-line);border-top-color:var(--g);
  border-radius:50%;animation:cc-sp .7s linear infinite;vertical-align:-2px}
@keyframes cc-sp{to{transform:rotate(360deg)}}
/* Asked for less motion? Then none of it, everywhere, in one place. */
@media (prefers-reduced-motion:reduce){
  .cc-spin{animation-duration:2s}
  .cc-main,.cc-modal,.cc-modal-box,.cc-toast{animation:none}
  .cc-chev,.cc-groupbody,button.cc-tile,.cc-btn,.cc-card,table.cc-t tbody tr{transition:none}
  .cc-btn:active{transform:none}
  .cc-bell.has svg{animation:none}
  .cc-tick:active{transform:none}
  table.cc-board tbody tr.saved > td{animation:none}
  .cc-hint{transition:none}
}
/* ------------------------------------------------------------------ phone */
/* The app is a set of wide sheets, and a phone is not wide. Rather than
   shrinking everything until it is unreadable, the rules below decide what a
   small screen is for: the nav becomes a strip you swipe, the sheets scroll
   sideways inside their cards, and everything you tap is big enough to tap. */
@media (max-width:782px){
  .cc-wrap{margin-left:-10px}
  .cc-shell{flex-direction:column;min-height:0}
  /* Nothing may push the page wider than the phone. Everything that genuinely
     needs sideways room scrolls inside its own box, so clipping here is right. */
  html,body{overflow-x:hidden}
  .cc-shell{max-width:100vw;overflow-x:hidden}

  /* Positioned, because the projects fold drops out of the strip over the page
     rather than pushing the whole nav taller. */
  .cc-side{width:100%;max-width:100%;flex:none;padding:10px 0 6px;position:relative}
  .cc-brand{padding:0 12px 8px}

  /* One swipeable strip. The last item gets room to clear the edge, and a fade
     on the right says there is more — a cut-off word says only "broken". */
  .cc-nav{display:flex;overflow-x:auto;gap:2px;padding:0 8px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
  .cc-nav::-webkit-scrollbar{display:none}
  .cc-nav > li{flex:0 0 auto}
  .cc-nav > li:last-child{padding-right:26px}
  .cc-nav button{white-space:nowrap;padding:9px 13px;border-radius:8px}
  .cc-group{flex:0 0 auto}
  .cc-groupbody{display:none}
  .cc-group.open .cc-groupbody{display:block;position:absolute;left:8px;right:8px;z-index:30;
    margin-top:4px;background:var(--g-d);border-radius:10px;padding:6px;
    box-shadow:0 12px 28px rgba(0,0,0,.35)}
  .cc-group.open .cc-groupbody > .cc-subnav{overflow:visible}
  .cc-subnav button{padding-left:26px}
  .cc-subnav button::before{left:14px}

  /* Not hidden any more — signing out and switching theme are things you do
     on a phone more often than anywhere else. */
  .cc-side-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:8px;padding:8px 14px 2px;flex-wrap:wrap}
  .cc-side-who{padding:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cc-side-who span{display:inline;margin-left:6px}
  .cc-side-acts{flex:0 0 auto}
  .cc-main{padding:14px 12px 60px;max-width:100%;overflow-x:hidden}

  /* Headings stack; the tools below them wrap and stay reachable. */
  .cc-head{align-items:flex-start;gap:10px;margin-bottom:14px}
  .cc-head > div:first-child{width:100%}
  .cc-h1{font-size:20px}
  .cc-tools{width:100%;gap:6px}
  .cc-tools .cc-btn{flex:0 0 auto}
  .cc-tools select,.cc-tools input[type=text]{flex:1 1 140px;min-width:0}

  /* Every sheet scrolls sideways inside its own card rather than pushing the
     page wider than the phone. */
  .cc-card{padding:12px;border-radius:9px;overflow-x:auto}
  .cc-card > table.cc-t{min-width:560px}
  .cc-wide{-webkit-overflow-scrolling:touch}
  .cc-tiles{grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px}
  .cc-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cc-tabs::-webkit-scrollbar{display:none}
  .cc-tabs button{white-space:nowrap}

  /* Anything tapped gets a real target, and 16px stops iOS zooming on focus. */
  #cc-app input,#cc-app select,#cc-app textarea,.cc-modal-box input,
  .cc-modal-box select,.cc-modal-box textarea{font-size:16px;min-height:40px}
  .cc-btn{min-height:38px;padding:8px 14px}
  .cc-btn.sm{min-height:34px}
  .cc-tick{width:24px;height:24px}
  .cc-tickcol input[type=checkbox]{width:20px;height:20px}

  /* The to do, which is the screen most likely to be read on a phone. */
  .cc-todo-add{flex-wrap:wrap}
  .cc-todo-add input{flex:1 1 100%}
  .cc-todo-add select{flex:1 1 calc(50% - 4px)}
  .cc-todo-add .cc-btn{flex:1 1 100%}
  .cc-todo-item{gap:9px;padding:12px 4px}
  .cc-todo-text{font-size:15px}
  .cc-todo-proj{font-size:9.5px;padding:2px 6px}

  /* The bars above a sheet used to wrap into four or five rows and push the
     table off the bottom of the screen. They now scroll as one line each. */
  .cc-export,.cc-boardbar{flex-wrap:wrap;overflow:visible;gap:6px}
  .cc-export > *,.cc-boardbar > *{flex:0 0 auto;white-space:nowrap}
  .cc-find{min-width:140px}
  .cc-export .cc-btn,.cc-boardbar .cc-btn{font-size:12px;padding:7px 10px;min-height:34px}

  /* Freezing a column and full screen are desk tools. On a phone they only eat
     the width the sheet needs, and sticky columns fight the sideways scroll. */
  #df_freeze,#df_full,#pf_freeze,#pf_full,#b_freeze,#b_full{display:none}
  .cc-stick{position:static !important;left:auto !important}

  .cc-bulkbar{padding:10px 12px}
  .cc-bulkbar .cc-tools{width:auto}
  .cc-modal{padding:10px}
  .cc-modal-box{max-height:92vh;padding:16px}
  .cc-modal-foot{flex-wrap:wrap}
  .cc-row{flex-direction:column;gap:10px}
  .cc-row > div{width:100%}
  .cc-export{flex-wrap:wrap}
  .cc-when{flex-direction:column;align-items:flex-start;gap:6px}
}

/* Narrow phones, where two of anything side by side stops working. */
@media (max-width:420px){
  .cc-main{padding:12px 10px 60px}
  .cc-h1{font-size:18px}
  .cc-tiles{grid-template-columns:1fr 1fr}
  .cc-todo-add select{flex:1 1 100%}
  .cc-swatches{gap:6px}
  .cc-swatch{height:30px;padding:0 10px;font-size:11.5px}

  /* "Updated 4 minutes ago" is the first thing to go when room runs out — the
     bell and Refresh are the parts you act on. Refresh keeps its full label
     when it has something to tell you. */
  .cc-sync-when{display:none}
  .cc-sync-when.behind{display:inline}
  .cc-head .cc-tools{gap:5px}
  .cc-head .cc-tools .cc-btn{font-size:12.5px;padding:8px 11px}
  .cc-head .cc-tools input[type=text]{flex:1 1 100%}

  /* One long word in a heading should wrap, not stretch the page. */
  .cc-h1,.cc-sub,.cc-name{overflow-wrap:anywhere}
}

/* ------------------------------------------- front of site: [curation_den] */
.cc-front{background:var(--bg);margin:0}
.cc-front .cc-shell{min-height:70vh}

body.cc-standalone{margin:0;padding:0;background:var(--bg)}
body.cc-standalone .cc-front .cc-shell{min-height:100vh}
/* cc-has-bar is ours, set in CC_Page::body_class — the admin bar has already
   pushed <html> down by its own height, so take that back off. */
body.cc-standalone.cc-has-bar .cc-front .cc-shell{min-height:calc(100vh - 32px)}
@media screen and (max-width:782px){
  body.cc-standalone.cc-has-bar .cc-front .cc-shell{min-height:calc(100vh - 46px)}
}

/* Themes style bare buttons, inputs and tables far more heavily than wp-admin
   does. Hold the app's own look inside its wrapper. */
.cc-front table.cc-t{background:none;border:0;margin:0}
/* The board is exempt. Its frozen columns and sticky header need a solid
   background to hide what scrolls under them — blanking those made the pinned
   columns see-through, which read as columns lying on top of one another. */
.cc-front table.cc-t:not(.cc-board) th,
.cc-front table.cc-t:not(.cc-board) td{background:none}
.cc-front .cc-btn,.cc-front .cc-nav button,.cc-front .cc-tabs button{
  text-transform:none;letter-spacing:normal;box-shadow:none;height:auto;width:auto;min-height:0;text-decoration:none}
.cc-front #cc-app input,.cc-front #cc-app select,.cc-front #cc-app textarea{
  box-shadow:none;height:auto;min-height:0;margin:0;width:auto}
.cc-front #cc-app h1,.cc-front #cc-app h3{padding:0;text-transform:none;letter-spacing:-.01em}

/* ----------------------------------------------------------- the front door */
/* Signing in, and waiting to be let in. Deliberately not the app shell — there
   is no sidebar to show someone who cannot open anything in it yet. */
.cc-login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;
  background:var(--g-d);
  background-image:radial-gradient(circle at 20% 15%,rgba(111,211,165,.16),transparent 55%),
                   radial-gradient(circle at 85% 85%,rgba(31,111,82,.34),transparent 55%);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body.cc-standalone.cc-has-bar .cc-login{min-height:calc(100vh - 32px)}
@media screen and (max-width:782px){
  body.cc-standalone.cc-has-bar .cc-login{min-height:calc(100vh - 46px)}
}
.cc-login-card{width:min(400px,100%);background:var(--card);border-radius:14px;padding:30px 28px;
  box-shadow:var(--card-shadow);color:var(--ink)}
.cc-login-brand{margin-bottom:18px}
.cc-login-brand b{display:block;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.cc-login-brand span{display:block;font-size:11px;color:var(--mute);margin-top:3px;
  letter-spacing:.08em;text-transform:uppercase}
.cc-login-lead{font-size:14px;color:var(--mute);line-height:1.6;margin:0 0 18px}
.cc-login-lead b{color:var(--ink)}
.cc-login-card label{display:block;font-size:12px;color:var(--mute);margin:0 0 4px}
.cc-login-card .cc-hint{color:var(--faint);font-weight:400}
.cc-login-card input{width:100%;border:1px solid var(--field-line);border-radius:8px;padding:10px 12px;
  font-size:15px;font-family:inherit;color:var(--ink);background:var(--field);margin-bottom:14px;box-sizing:border-box}
.cc-login-card input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--g)}
.cc-login-card input.cc-code{font-size:26px;letter-spacing:.34em;text-align:center;font-weight:700;padding:12px}
.cc-btn.block{display:block;width:100%;padding:11px;font-size:15px;text-align:center;box-sizing:border-box}
a.cc-btn{text-decoration:none}
a.cc-btn:hover{color:var(--g-on);text-decoration:none}
.cc-login-foot{text-align:center;font-size:12.5px;color:var(--mute);margin-top:10px}
.cc-link{background:none;border:0;padding:0;color:var(--g);font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:inherit;text-decoration:underline}
/* Same link on the dark sidebar. */
.cc-link.light{color:var(--side-dim);font-size:11px;margin-top:4px}
.cc-link.light:hover{color:#fff}
.cc-login-who{background:var(--well);border:1px solid var(--line);border-radius:9px;padding:12px 14px;
  font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:16px}
.cc-login-who span{font-weight:400;color:var(--mute);font-size:12.5px}
.cc-login-card .cc-err{margin-bottom:14px}

/* The server has moved on and we have not. An offer, not an interruption —
   the screen changes when the person decides it should. */
.cc-btn.behind{background:var(--warn-bg,var(--g-l));border-color:var(--warn);color:var(--warn);
  font-weight:650;animation:cc-nudge 2.4s ease-in-out infinite}
.cc-btn.behind:hover{background:var(--warn);border-color:var(--warn);color:#fff}
.cc-sync-when.behind{color:var(--warn);font-weight:600}
@keyframes cc-nudge{0%,92%,100%{transform:none}96%{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.cc-btn.behind{animation:none}}

/* Setup instructions that stay folded once the thing is set up. */
.cc-steps{border:1px solid var(--line);border-radius:9px;background:var(--well);padding:10px 12px}
.cc-steps summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--ink);list-style:none}
.cc-steps summary::-webkit-details-marker{display:none}
.cc-steps summary::before{content:'▸ ';color:var(--g)}
.cc-steps[open] summary::before{content:'▾ '}
.cc-steps ol{margin:10px 0 2px;padding-left:22px;font-size:13px;line-height:1.7;color:var(--mute)}
.cc-steps li{margin-bottom:4px}
.cc-steps code{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:1px 5px;
  font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Where you are in a setup that has more than one part. Numbered rather than
   a bare progress bar: "2 of 3" is a thing you can hold in your head, and a
   step already done is worth marking as done so going back feels safe. */
.cc-stepbar{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 16px}
.cc-step{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--mute);
  background:var(--well);border:1px solid var(--line);border-radius:20px;padding:5px 12px 5px 6px}
.cc-step b{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:var(--line);color:var(--mute);font-size:11px;font-weight:700}
.cc-step.on{color:var(--ink);border-color:var(--g);background:var(--g-l)}
.cc-step.on b{background:var(--g);color:#fff}
.cc-step.done b{background:var(--g-l);color:var(--g)}

/* A numbered how-to inside a modal, where the steps are the content rather
   than a footnote to it. */
.cc-howto{margin:0 0 12px;padding-left:20px;font-size:13px;line-height:1.65;color:var(--ink)}
.cc-howto li{margin-bottom:10px}
.cc-howto code{background:var(--well);border:1px solid var(--line);border-radius:4px;padding:1px 5px;
  font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cc-howto textarea{background:var(--well);color:var(--mute);border:1px solid var(--line);
  border-radius:7px;padding:8px 10px;resize:vertical;white-space:pre}

/* One line per project, each with the way into its own spreadsheet. The code
   leads because that is what people say out loud; the name follows it quietly. */
.cc-booklist{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin:0 0 14px}
.cc-book{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--card);
  border-top:1px solid var(--line)}
.cc-book:first-child{border-top:0}
.cc-book .cc-btn,.cc-book a.cc-btn{flex:0 0 auto}
.cc-book .cc-pill{flex:0 0 auto}
.cc-bookname{display:block;min-width:0}
.cc-bookname b{display:block;font-size:13px;font-weight:650;color:var(--ink)}
.cc-bookname span{display:block;font-size:12px;color:var(--mute);margin-top:1px}

/* Who is here: a quiet dot, not a traffic light. */
.cc-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--dot);
  margin-right:7px;vertical-align:1px}
.cc-dot.on{background:var(--dot-on);box-shadow:0 0 0 3px rgba(31,157,104,.16)}
.cc-dot.today{background:var(--dot-today)}

/* ------------------------------------------------ the wp-admin control panel */
/* Not the app — the app is its own site. This is the door into it and the few
   settings that govern it, wearing WordPress's clothes rather than ours. */
.cc-admin-open{background:#fff;border:1px solid #dcdcde;border-left:4px solid #1f6f52;
  border-radius:4px;padding:16px 18px;margin:16px 0 20px;max-width:760px}
.cc-admin-open p{margin-top:0}
.cc-admin-open code{font-size:12px}
.cc-admin-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-bottom:22px;max-width:760px}
.cc-admin-tile{background:#fff;border:1px solid #dcdcde;border-radius:4px;padding:12px 14px}
.cc-admin-tile b{display:block;font-size:22px;line-height:1.2;color:#12271f}
.cc-admin-tile span{display:block;font-size:12px;color:#646970;margin-top:2px}

/* --------------------------------------------------------------- the print */
/* A sheet, not a screenshot. Black on white, generous line height, an empty
   box beside every task so it can be ticked with a pen, and nothing on the
   page that only makes sense with a mouse. It lives hidden in the document
   and only the printer ever sees it. */
.cc-print{display:none}

@media print{
  /* Everything the app draws goes away; only the sheet remains. */
  body > *{display:none !important}
  body > .cc-print{display:block !important}
  html,body{background:#fff !important;margin:0 !important;padding:0 !important}
  @page{margin:14mm 12mm}

  .cc-print{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:#111;font-size:11pt;line-height:1.45}
  .cc-print *{box-sizing:border-box}

  .pr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
    border-bottom:2px solid #111;padding-bottom:8px;margin-bottom:14px}
  .pr-head h1{font-size:17pt;margin:0;letter-spacing:-.01em}
  .pr-sub{font-size:9.5pt;color:#444;margin-top:3px}
  .pr-stamp{font-size:8.5pt;color:#777;white-space:nowrap}

  /* A day, as lines you can tick. */
  .pr-day{break-inside:avoid;page-break-inside:avoid;margin-bottom:12px}
  .pr-day h3{font-size:11pt;margin:0 0 5px;padding-bottom:3px;border-bottom:1px solid #bbb;
    text-transform:uppercase;letter-spacing:.06em}
  /* Nothing here depends on a background printing — many printers are set to
     drop them, and a white-on-white event name is worse than a plain one. */
  .pr-day h3 em{font-style:normal;font-size:8pt;border:1px solid #111;border-radius:3px;
    padding:0 5px;letter-spacing:.04em;vertical-align:1px}
  .pr-ev{font-size:9pt;font-weight:700;margin:0 0 5px;padding:2px 0 2px 7px;
    border-left:3px solid #111}
  .pr-day ul{list-style:none;margin:0;padding:0}
  .pr-day li{display:flex;align-items:flex-start;gap:8px;padding:3.5px 0;
    border-bottom:1px dotted #ccc;break-inside:avoid;page-break-inside:avoid}
  .pr-box{flex:0 0 auto;width:12px;height:12px;border:1.2px solid #444;border-radius:2px;
    margin-top:2.5px;text-align:center;line-height:11px;font-size:10px}
  .pr-t{flex:1 1 auto}
  .pr-t.done{color:#888;text-decoration:line-through}
  .pr-who{flex:0 0 auto;font-size:8.5pt;color:#555;white-space:nowrap}
  /* Which project a line is for, kept quiet so the task still reads first. */
  .pr-proj{font-size:7.5pt;font-weight:700;letter-spacing:.04em;border:1px solid #999;
    border-radius:3px;padding:0 4px;color:#555;white-space:nowrap}
  .pr-none{margin:2px 0 0;color:#aaa;font-size:9pt}

  /* The matrix: four ruled squares, drawn with borders rather than colour so
     it survives a printer that drops backgrounds. */
  .pr-matrix{display:grid;grid-template-columns:1fr 1fr;border:1.6px solid #111}
  .pr-matrix .pr-q{margin:0;padding:9px 11px;min-height:78mm;border:.8px solid #111}
  .pr-matrix .pr-q h3{font-size:10pt}
  .pr-matrix .pr-q h3 em,.pr-qlist .pr-q h3 em{font-style:normal;font-size:8pt;border:1px solid #111;
    border-radius:3px;padding:0 5px;margin-left:4px;letter-spacing:0}
  .pr-qlist .pr-q{margin-bottom:14px}
  .pr-loose{margin-top:12px}
  .pr-q .pr-who{flex:0 0 auto}

  /* A week: two columns, so seven days land on one page. */
  .pr-week{column-count:2;column-gap:16mm}

  /* A month: the grid, because that is how a month is read. */
  .pr-weekdays,.pr-grid{display:grid;grid-template-columns:repeat(7,1fr)}
  .pr-weekdays{font-size:8pt;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    border-bottom:1px solid #111;padding-bottom:3px;margin-bottom:2px}
  /* Grid lines drawn as borders, not as a background showing through gaps. */
  .pr-grid{border-top:1px solid #999;border-left:1px solid #999}
  .pr-cell{border-right:1px solid #999;border-bottom:1px solid #999;
    min-height:23mm;padding:3px 4px;font-size:8pt;break-inside:avoid;page-break-inside:avoid}
  .pr-cell.out{color:#aaa}
  .pr-cell.out b{color:#aaa}
  .pr-cell b{display:block;font-size:9pt;margin-bottom:2px}
  .pr-cev{font-weight:700;border:1px solid #111;border-radius:2px;padding:0 3px;
    margin-bottom:2px;font-size:7.5pt;display:inline-block;line-height:1.4}
  .pr-ct{padding-left:8px;position:relative;margin-bottom:1.5px;line-height:1.25}
  .pr-ct::before{content:'';position:absolute;left:1px;top:4px;width:4px;height:4px;
    border:1px solid #555;border-radius:1px}
  .pr-ct.done{color:#999;text-decoration:line-through}
  .pr-ct.done::before{border-color:#999}
}


/* ------------------------------------------------------------- Tools menu */
.cc-tmenu{position:relative;display:inline-block}
.cc-tmenu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:210px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}
.cc-tmenu-list[hidden]{display:none}
.cc-tmenu-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;
  padding:9px 10px;border-radius:7px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap}
.cc-tmenu-item:hover,.cc-tmenu-item:focus-visible{background:var(--g-l);color:var(--g);outline:none}

/* ----------------------------------------------- a long cell, read in full */
.cc-expand{position:fixed;z-index:200;background:var(--card);border:1px solid var(--g-line);border-radius:12px;
  box-shadow:var(--card-shadow);padding:12px;display:flex;flex-direction:column;gap:8px}
.cc-expand-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--mute)}
.cc-expand-head b{color:var(--ink);font-size:13px}
.cc-expand textarea{width:100%;box-sizing:border-box;min-height:140px;resize:vertical;font:inherit;font-size:14px;
  line-height:1.5;padding:9px 10px;border:1px solid var(--field-line);border-radius:8px;background:var(--field);
  color:var(--ink);white-space:pre-wrap}
.cc-expand textarea:focus{outline:2px solid var(--g-line)}
.cc-expand-foot{display:flex;align-items:center;gap:8px}
.cc-expand-foot .cc-firm{margin-right:auto}


/* ------------------------------------------- To do, with key tasks beneath */
.cc-sec{display:flex;align-items:center;gap:10px;margin:22px 2px 8px}
.cc-sec:first-of-type{margin-top:6px}
.cc-sec h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.cc-sec .cc-firm{margin-right:auto}
.cc-kt{list-style:none;margin:0;padding:0}
.cc-kt-item{display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:9px;
  border-bottom:1px solid var(--row);transition:background-color .15s ease,opacity .2s ease}
.cc-kt > .cc-kt-item:last-child{border-bottom:0}
.cc-kt-item:hover{background:var(--well)}
.cc-kt-tick{flex:0 0 auto;width:19px;height:19px;border-radius:50%;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;border:1.5px solid var(--field-line);background:var(--card);
  color:var(--g-on);padding:0;transition:background-color .12s ease,border-color .12s ease,transform .08s ease}
.cc-kt-tick:hover:not(:disabled){border-color:var(--g)}
.cc-kt-tick:active:not(:disabled){transform:scale(.9)}
.cc-kt-tick.on{background:var(--g);border-color:var(--g)}
.cc-kt-tick:disabled{cursor:default;opacity:.55}
.cc-kt-main{flex:1;min-width:0}
.cc-kt-title{display:block;font-size:14.5px;line-height:1.4;font-weight:550;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis}
.cc-kt-meta{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:12px}
.cc-kt-due{flex:0 0 auto}
.cc-kt-item.done{opacity:.6}
.cc-kt-item.done .cc-kt-title{color:var(--faint);text-decoration:line-through}
.cc-kt-done{margin-top:6px;border-top:1px solid var(--row);padding-top:6px}
.cc-kt-done summary{cursor:pointer;font-size:12.5px;color:var(--mute);padding:6px 8px;list-style:none}
.cc-kt-done summary::-webkit-details-marker{display:none}
.cc-kt-done summary::before{content:"▸ ";color:var(--faint)}
.cc-kt-done[open] summary::before{content:"▾ "}
.cc-kt-foot{margin-top:10px}
.cc-kt-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cc-kt-add[hidden]{display:none}
.cc-kt-add input[type=text]{flex:1;min-width:200px}
.cc-kt-add input,.cc-kt-add select{border:1px solid var(--field-line);border-radius:7px;padding:8px 10px;
  font-size:13px;font-family:inherit;background:var(--field);color:var(--ink)}
@media (max-width:782px){
  .cc-kt-item{padding:12px 4px;gap:10px}
  .cc-kt-tick{width:24px;height:24px}
}


/* ------------------------------------------------ a firm's projects, in line */
/* Every project is one line of a fixed height in each of the five project
   columns, which is what keeps project 2 level across all of them. */
.cc-wl{display:flex;align-items:center;gap:7px;height:34px;margin-bottom:6px;line-height:normal}
.cc-wl:last-of-type{margin-bottom:6px}
.cc-wl-n{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--g);color:var(--g-on);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.cc-wl input,.cc-wl select{width:100%;min-width:0;height:34px;box-sizing:border-box}
.cc-wl input:disabled,.cc-wl select:disabled{opacity:.45;cursor:not-allowed}
.cc-wl-x{flex:0 0 auto;border:0;background:none;color:var(--faint);cursor:pointer;padding:6px;border-radius:6px;
  opacity:0;transition:opacity .12s ease,background-color .12s ease}
.cc-wl:hover .cc-wl-x,.cc-wl-x:focus-visible{opacity:1}
.cc-wl-x:hover{background:var(--late-bg);color:var(--late)}
.cc-wl-add{display:inline-flex;align-items:center;height:30px;padding:0 10px;border:1px dashed var(--g-line);
  background:transparent;color:var(--g);border-radius:8px;font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;line-height:1;transition:background-color .12s ease,border-color .12s ease}
.cc-wl-add:hover{background:var(--g-l);border-color:var(--g)}
/* The project columns get a faint wash so they read as one block. */
table.cc-board tbody td:has(.cc-wl),table.cc-board tbody td:has(.cc-wl-add){background:var(--well)}


/* ------------------------------------------------------ the four boxes */
.cc-mx-opts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 12px}
.cc-mx-opts .cc-grow{flex:1}
.cc-mx-opts select,.cc-todo-add select{border:1px solid var(--field-line);border-radius:7px;padding:7px 9px;
  font:inherit;font-size:13px;background:var(--field);color:var(--ink)}
.cc-mx{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cc-mx-box{--qc:var(--mute);background:var(--card);border:1px solid var(--line);border-top:4px solid var(--qc);
  border-radius:12px;padding:12px 14px 12px;min-height:250px;display:flex;flex-direction:column;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
.cc-mx-box.q1{--qc:var(--late)}
.cc-mx-box.q2{--qc:var(--warn)}
.cc-mx-box.q3{--qc:var(--g)}
.cc-mx-box.q4{--qc:var(--faint)}
.cc-mx-box.over{box-shadow:0 0 0 2px var(--qc);background:var(--well)}
.cc-mx-box header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.cc-mx-box h3{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--qc)}
.cc-mx-n{min-width:22px;height:22px;border-radius:20px;background:var(--well);border:1px solid var(--line);
  color:var(--mute);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.cc-mx-n:empty{display:none}
.cc-mx-list{flex:1;margin:0 0 6px}
.cc-mx-list:empty::before{content:"Nothing here";display:block;padding:18px 6px;font-size:12.5px;color:var(--faint)}
.cc-mx-box .cc-todo-item{padding:8px 4px;gap:9px}
.cc-mx-box .cc-todo-text{font-size:14px}
.cc-mx-add input{width:100%;box-sizing:border-box;border:1px dashed var(--line);border-radius:8px;padding:8px 10px;
  font:inherit;font-size:13px;background:transparent;color:var(--ink)}
.cc-mx-add input:focus{outline:none;border-style:solid;border-color:var(--qc);background:var(--field)}
.cc-todo-item.dragging{opacity:.4}
.cc-todo-item[draggable=true]{cursor:grab}
.cc-mx-tray{margin-top:14px}
.cc-mx-tray h3{margin:0 0 4px;font-size:13px}

/* A box named on a to do, and the way to move it. */
.cc-qchip{flex:0 0 auto;align-self:center;border:1px solid var(--line);background:var(--well);color:var(--mute);
  border-radius:20px;padding:2px 9px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background-color .12s ease}
.cc-qchip:hover{background:var(--g-l)}
.cc-qchip.q1{color:var(--late-ink);background:var(--late-bg);border-color:transparent}
.cc-qchip.q2{color:var(--warn-ink);background:var(--warn-bg);border-color:transparent}
.cc-qchip.q3{color:var(--g);background:var(--g-l);border-color:transparent}
.cc-qchip.q0{border-style:dashed;color:var(--late-ink)}
.cc-qmove{flex:0 0 auto;align-self:center;border:0;background:none;color:var(--faint);cursor:pointer;
  border-radius:6px;padding:3px 6px;font-size:14px;line-height:1;opacity:0;transition:opacity .12s ease}
.cc-todo-item:hover .cc-qmove,.cc-qmove:focus-visible{opacity:1}
.cc-qmove:hover{background:var(--g-l);color:var(--g)}
@media (hover:none){.cc-qmove{opacity:.7}}

.cc-qmenu{position:fixed;z-index:300;min-width:230px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:6px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}
.cc-qmenu-h{font-size:11px;color:var(--mute);padding:4px 8px 6px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.cc-qmenu button{text-align:left;border:0;background:none;padding:8px 10px;border-radius:7px;font:inherit;font-size:13px;
  color:var(--ink);cursor:pointer;border-left:4px solid transparent}
.cc-qmenu button:hover{background:var(--well)}
.cc-qmenu button.on{font-weight:700;background:var(--well)}
.cc-qmenu button.q1{border-left-color:var(--late)}
.cc-qmenu button.q2{border-left-color:var(--warn)}
.cc-qmenu button.q3{border-left-color:var(--g)}
.cc-qmenu button.q4{border-left-color:var(--faint)}

@media (max-width:782px){
  .cc-mx{grid-template-columns:1fr}
  .cc-mx-box{min-height:0}
}

/* Key tasks, folded away until they are wanted. */
.cc-ktd{margin-top:18px}
.cc-ktd > summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:8px 2px;
  border-radius:8px;user-select:none}
.cc-ktd > summary::-webkit-details-marker{display:none}
.cc-ktd > summary h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.cc-ktd > summary:hover h2{color:var(--g)}
.cc-ktd-chev{width:8px;height:8px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);
  transform:rotate(-45deg);transition:transform .15s ease;margin:0 4px 0 2px}
.cc-ktd[open] > summary .cc-ktd-chev{transform:rotate(45deg)}
.cc-ktd > .cc-card{margin-top:6px}
.cc-kt-bar{display:flex;justify-content:flex-end;margin-bottom:6px}


/* ------------------------------------------- a scroll bar at the top of a table */
.cc-topscroll{overflow-x:auto;overflow-y:hidden;height:11px;margin:0 0 3px;scrollbar-width:thin;
  scrollbar-color:var(--g-line) transparent}
.cc-topscroll > div{height:1px}
.cc-topscroll::-webkit-scrollbar{height:8px}
.cc-topscroll::-webkit-scrollbar-track{background:transparent}
.cc-topscroll::-webkit-scrollbar-thumb{background:var(--g-line);border-radius:8px}
.cc-topscroll:hover::-webkit-scrollbar-thumb{background:var(--g)}
@media print{.cc-topscroll{display:none !important}}


/* ------------------------------------------------ users: team switch, remove */
.cc-switch{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:12px;color:var(--mute);cursor:pointer}
.cc-switch input{accent-color:var(--g);cursor:pointer}
.cc-rs-act{text-align:right;white-space:nowrap}


/* ------------------------------------------------ the left menu, put away */
.cc-side{position:relative}
.cc-sidetoggle{position:absolute;top:14px;right:10px;width:28px;height:28px;border:0;border-radius:8px;
  background:transparent;color:var(--side-ink);opacity:.6;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;transition:opacity .12s ease,background-color .12s ease}
.cc-sidetoggle:hover{opacity:1;background:rgba(255,255,255,.1)}
.cc-main{position:relative}
.cc-sideopen{display:none}
.cc-shell.cc-sidecollapsed > .cc-side{display:none}
.cc-shell.cc-sidecollapsed > .cc-main{padding-left:60px}
.cc-shell.cc-sidecollapsed .cc-sideopen{display:inline-flex;position:absolute;top:16px;left:14px;z-index:30;
  width:34px;height:34px;align-items:center;justify-content:center;border-radius:9px;cursor:pointer;
  background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:background-color .12s ease}
.cc-shell.cc-sidecollapsed .cc-sideopen:hover{background:var(--g-l);color:var(--g)}
@media (max-width:782px){
  .cc-shell.cc-sidecollapsed > .cc-main{padding-left:12px;padding-top:56px}
  .cc-shell.cc-sidecollapsed .cc-sideopen{top:10px;left:10px}
}

/* ----------------------- full screen for the Directory and the Master: the
   menu goes, and so does everything above the table that is not the table */
.cc-shell.cc-fullpage > .cc-side{display:none}
.cc-shell.cc-fullpage > .cc-main{padding:14px 18px 20px}
.cc-shell.cc-fullpage .cc-sideopen{display:none}
.cc-shell.cc-fullpage .cc-wide{max-height:calc(100vh - 150px)}
.cc-shell.cc-fullpage .cc-note,.cc-shell.cc-fullpage .cc-export{display:none}
.cc-shell.cc-fp-proj .cc-head,.cc-shell.cc-fp-proj .cc-tabs{display:none}


/* ---------------------------------------------------- the add-a-person form */
.cc-modal-box .cc-row > .cc-grow{min-width:0}
.cc-modal-box input[type=text],.cc-modal-box select,.cc-modal-box textarea{box-sizing:border-box}
.cc-addto{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.cc-addto-fixed{display:flex;align-items:center;gap:8px;margin:2px 0 8px}
.cc-addto-proj summary{cursor:pointer;font-size:13px;color:var(--g);font-weight:600;list-style:none;padding:4px 0}
.cc-addto-proj summary::-webkit-details-marker{display:none}
.cc-addto-proj summary::before{content:"＋ "}
.cc-addto-proj[open] summary::before{content:"－ "}
.cc-addto-proj .cc-picklist{margin-top:6px;max-height:170px;overflow:auto}


/* ------------------------------------- "this name is already here": the choice */
.cc-match{margin:12px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--well);
  display:flex;flex-direction:column;gap:3px}
.cc-match-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px}
.cc-match-opts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.cc-match-opt{display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;padding:12px 14px;
  border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink);cursor:pointer;font:inherit;
  transition:border-color .12s ease,background-color .12s ease}
.cc-match-opt b{font-size:14px}
.cc-match-opt span{font-size:12.5px;color:var(--mute);line-height:1.4}
.cc-match-opt:hover,.cc-match-opt:focus-visible{border-color:var(--g);background:var(--g-l);outline:none}


/* ------------------------------------------- who confirmed, who declined */
.cc-otags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px;line-height:1.2}
.cc-otag{font-size:10.5px;padding:2px 7px}
.cc-out-wrap{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.cc-out-group{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.cc-out-group header{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.cc-out-group h3{margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.cc-out{list-style:none;margin:0;padding:0}
.cc-out li{display:flex;align-items:center;gap:12px;padding:9px 6px;border-bottom:1px solid var(--row)}
.cc-out li:last-child{border-bottom:0}
.cc-out li.no .cc-out-who b{color:var(--mute)}
.cc-out .cc-pill{flex:0 0 86px;text-align:center}
.cc-out-who{flex:1;min-width:0;display:flex;flex-direction:column}
.cc-out-owner{flex:0 0 auto}

.cc-onote{margin-top:4px;line-height:1.25}
.cc-oline{font-size:12px;font-weight:700}
.cc-oline.yes{color:var(--g)}
.cc-oline.no{color:var(--late)}