/* Daily Life Doc, round 13 (zone F2): a client's plan, as the page "Expert Plans" draws it ("Writing a plan", "Five
   kinds of line", "A client's page"): the Plan tab (the lines full width, What happens next, Will answer, Won't
   answer), the plan beside Chat, a line's chip (the kind's word first in its colour), the underlines, the "@" pills,
   the picker under a line, the chip's sentence, a line's history and the "@" menu's rows (js/plan/*.js,
   js/ui/at-list.js). Tokens and keyframes come from css/base.css. */

/* ---------- The Plan tab: the lines, and the column on the right ---------- */
.ptab.wb { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; padding-bottom: 16px; }
.wdoc { display: flex; flex-direction: column; min-width: 0; min-height: 540px; text-align: left; padding: 10px 14px 18px; border-radius: 18px; background: var(--card); font-size: var(--t-s); line-height: 1.55; }
.side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cbox { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 11px 14px 13px; border-radius: 16px; background: var(--card); }
.chd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--t-xs); font-weight: 600; color: var(--ink3); }
.chd span { font-weight: 400; }

/* The head: "v9 · Expert · Atlas: Back care · Ends 17 Nov" */
.ptop { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 34px; padding: 0 6px; }
.ptop .phv { font-size: var(--t-xs); color: var(--ink3); }
.ptop .phv b { font-weight: 600; color: var(--ink2); }
.phd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.phd > * { white-space: nowrap; }
.phd > *:not(:last-child)::after { content: '·'; margin: 0 6px; color: var(--ink3); font-weight: 400; font-size: var(--t-xs); }
.who { padding: 1px 7px; border-radius: 6px; background: var(--soft); color: var(--ink2); font-size: var(--t-2xs); font-weight: 600; }
.who.ai { background: var(--care); color: var(--care-d); }
.pask { display: none; }
.pbtns { display: flex; gap: 6px; margin-left: auto; }
/* Versions of a plan (js/plan/plan-vers.js) */
.plvers { display: flex; flex-direction: column; gap: 4px; }
.plver { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--cardline); }
.pvh { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 0; text-align: left; font-size: var(--t-s); }
.pvh small, .pnow { color: var(--ink3); font-size: var(--t-xs); }
.pvl { margin: 4px 0 8px; padding: 10px 14px 10px 30px; border-radius: 12px; background: var(--field); font-size: var(--t-sm); line-height: 1.5; }
.pvl li.i1 { margin-left: 18px; }

/* ---------- A line ---------- */
.plines { position: relative; min-height: 60px; display: flex; flex-direction: column; }
.wdoc .plines { flex: 1; padding-bottom: 40px; }
.plines.pempty:not(.ro)::before { content: 'Write the plan here, one line at a time.'; padding: 4px 6px; color: var(--ink3); pointer-events: none; }
.prow.in { animation: dd-rise var(--m-add) var(--ease-out) both; }
.pln { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 3px; padding: 4px 6px; border-radius: 9px;
  transition: background-color 400ms ease; }
.pln.i1 { margin-left: 22px; }
.pln.i1::before { content: ''; position: absolute; left: -12px; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink3); }
.pln.cur { background: color-mix(in srgb, var(--app) 70%, transparent); }
.ptx { flex: 1 1 300px; min-width: 0; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; caret-color: var(--sage-d); }
.ptx[contenteditable="true"] { cursor: text; }
.ptx:empty::before { content: '\200b'; }
.pend { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.pend > * { animation: dd-pop 300ms var(--ease-out) both; }
.pln.paused .ptx { color: var(--ink3); }
.aitag { display: none; align-self: center; padding: 0 6px; border-radius: 6px; background: var(--care); color: var(--care-d); font-size: var(--t-2xs); font-weight: 600; line-height: 18px; }
/* kb.css draws its own .aitag (an animated width) and loads later: a plan line's tag is drawn here, more exactly, so a
   line the AI did not write keeps no empty slot before its words (DR 9). */
.pln .aitag { display: none; }
.pln.isai .aitag { display: inline-block; max-width: none; opacity: 1; padding: 0 6px; }

/* The underline of a time, day or date (code, no AI): a tap opens the picker. */
.u { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--note-d) 55%, transparent);
  border-radius: 4px; cursor: pointer; animation: u-in 500ms var(--ease-out); }
@keyframes u-in { from { text-decoration-color: transparent; } }
/* An item named with "@": a small pill (an Atlas field, an app, a document, a video). */
.kref { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; margin: 0 1px; border-radius: 7px; background: var(--note); color: var(--note-d);
  font-size: var(--t-xs); font-weight: 500; line-height: 20px; vertical-align: 1px; white-space: nowrap; user-select: all; }
.kref svg { flex: none; width: 11px; height: 11px; }

/* ---------- The chip: the kind's word first, in its colour ---------- */
.chp { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 8px; background: var(--soft); color: var(--ink2);
  font: 500 var(--t-xs)/1.5 var(--font); white-space: nowrap; cursor: pointer; transition: background-color 300ms, color 300ms, box-shadow 200ms, transform 140ms var(--ease-out); }
.chp b { font-weight: 600; }
.chp:active { transform: scale(.97); }
.chp:focus-visible { outline: 2px solid var(--sage); outline-offset: 1px; }
.chp.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px currentColor; }
.chp.k-sch { background: var(--atlas-bg); color: var(--atlas-d); }
.chp.k-when { background: var(--try-bg); color: var(--try-d); }
.chp.k-ask { background: var(--good-bg); color: var(--good-d); }
.chp.k-rep { background: var(--soft); color: var(--ink2); }
.chp.k-apr { background: var(--care); color: var(--care-d); }
.chp.q { background: transparent; color: var(--ink2); box-shadow: inset 0 0 0 1px var(--ink3); }
.chp.off { opacity: .55; }
.chp.ps { background: transparent; color: var(--ink3); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.chp.ps::before { content: ''; width: 7px; height: 9px; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; box-sizing: border-box; }
/* A part taken from Defaults: grey, dotted, and the word "default"; a tap opens the same picker as an underline. */
.chp .dv { color: var(--ink3); font-weight: 400; text-decoration: underline dotted 1.5px; text-underline-offset: 3px; cursor: pointer; }
.dm { padding: 0 5px; border-radius: 5px; background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--ink3); font-size: var(--t-2xs); font-weight: 500; line-height: 16px; }
.wli .dm { background: var(--soft); }
.pwork { padding: 3px 4px; color: var(--ink3); font-size: var(--t-xs); font-weight: 500; animation: dd-wait 1.2s ease-in-out infinite; }
.pbtn, .plk { padding: 3px 11px; border-radius: 999px; font: 600 var(--t-xs) var(--font); white-space: nowrap; cursor: pointer; transition: transform 140ms var(--ease-out); }
.pbtn { background: var(--ink); color: var(--surface); }
.plk { background: var(--soft); color: var(--ink); font-weight: 500; }
.plk.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink3); color: var(--ink2); cursor: default; }
.pbtn:active, .plk:active { transform: scale(.96); }
.pmod { display: flex; justify-content: flex-end; gap: 6px; padding: 0 6px 6px; }

/* ---------- What opens under a line: the picker, the chip's sentence, the history ---------- */
.pafter:empty { display: none; }
.tpick, .cpop { position: relative; z-index: 2; display: flex; flex-direction: column; max-width: 300px; margin: 2px 6px 8px 28px; padding: 4px; border-radius: 14px;
  background: var(--surface); box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 18px 36px -18px rgba(20, 20, 20, .45); }
.tpick.in, .cpop.in, .cpop { animation: dd-pop 250ms var(--ease-out) both; }
.tpick { max-width: 210px; }
.tpick.k-repeat { width: 300px; max-width: calc(100vw - 40px); }
/* As a popover under the tapped underline, default part or chip (js/plan/plan-acts.js places it): over the lines. */
.prow { position: relative; }
.tpick.float, .cpop.float { position: absolute; z-index: 30; margin: 0; }
.tpick.float { width: 210px; }
.tpick.float.k-repeat { width: 300px; }
.cpop.float { width: min(400px, calc(100% - 12px)); }
.pq { padding: 6px 10px 2px; font-size: var(--t-2xs); font-weight: 600; color: var(--ink3); }
.tpl.scroll { max-height: 236px; overflow-y: auto; overscroll-behavior: contain; }
.tp { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 10px; border-radius: 9px; font-size: var(--t-sm); text-align: left; white-space: nowrap;
  transition: background-color 200ms, transform 140ms var(--ease-out); }
.tp:hover, .tp.on { background: var(--soft); }
.tp svg { width: 13px; height: 13px; flex: none; margin-left: auto; color: var(--sage-d); }
.tdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; padding: 6px 4px 4px; }
.td { min-height: 32px; border-radius: 8px; background: var(--field); font-size: var(--t-2xs); font-weight: 600; color: var(--ink2); }
.td.on { background: var(--ink); color: var(--surface); }
.tdate { margin: 4px 6px 8px; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--field); font: inherit; color: var(--ink); }
.tnum { display: flex; align-items: center; gap: 10px; padding: 6px 8px 8px; }
.tn { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); font-size: var(--t-m); }
.tv { min-width: 64px; text-align: center; font-weight: 600; }
.ptop + .tpick { margin-left: 6px; }
.cpop { max-width: 400px; margin-left: auto; margin-right: 6px; padding: 12px 14px; gap: 10px; font-size: var(--t-sm); line-height: 1.5; }
.cpop .who2 { font-size: var(--t-2xs); font-weight: 600; color: var(--ink3); }
.cpop .dsub { color: var(--ink3); }
.acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* A line's history: bars by day, drawn to scale */
.hist { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 2px 6px 8px 28px; padding: 10px 12px; border-radius: 14px; background: var(--field); font-size: var(--t-sm); }
.hist.in { animation: dd-rise var(--m-add) var(--ease-out) both; }
.hist .hh { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: var(--t-xs); font-weight: 600; color: var(--ink3); }
.hist .hh span:last-child { font-weight: 400; }
.hc svg { display: block; max-width: 460px; }
.hc .hv { fill: color-mix(in srgb, var(--sage) 85%, var(--card)); }
.hc .hv.hot { fill: var(--sage-d); }
.hc .hg { stroke: var(--cardline); stroke-dasharray: 2 3; }
.hc .hb { stroke: var(--cardline); }
.hc .hgoal { stroke: var(--ink2); stroke-dasharray: 4 3; stroke-width: 1.2; }
.hc text { font: 500 10px var(--font); fill: var(--ink3); text-anchor: middle; }
.hc .ha { text-anchor: start; }
.hc .hn { fill: var(--ink2); font-weight: 600; }
.hnote { font-size: var(--t-xs); color: var(--ink2); }
.hnote b { font-weight: 600; color: var(--ink); }

/* ---------- How a plan starts ---------- */
.estart { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 6px; padding: 14px; border-radius: 14px; background: var(--field); }
.estart .small { font-size: var(--t-xs); color: var(--ink2); }
.estart .eq { padding: 7px 12px; border-radius: 16px 16px 16px 5px; background: var(--bubble); font-size: var(--t-s); }
.pfrom { margin: 6px 6px 10px; }
.tlist { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.trow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px; background: var(--field); text-align: left;
  transition: background-color 200ms, transform 140ms var(--ease-out); }
.trow:active { transform: scale(.99); }
.trow .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trow .tt b { font-weight: 600; font-size: var(--t-sm); }
.trow small { color: var(--ink3); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdo { width: 18px; height: 18px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink3); transition: box-shadow 200ms; }
.trow.on .rdo { box-shadow: inset 0 0 0 5px var(--sage-d); }

/* ---------- What happens next, Will answer, Won't answer ---------- */
.nxl { display: flex; flex-direction: column; max-height: 380px; overflow: auto; margin: 0 -8px; padding: 0 8px 4px; overscroll-behavior: contain; }
.nxd { position: sticky; top: 0; z-index: 1; padding: 8px 0 2px; background: var(--card); font-size: var(--t-2xs); font-weight: 600; color: var(--ink3); }
.nxi { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 3px 0; font-size: var(--t-sm); }
.nxi .tm { display: flex; flex-direction: column; font-size: var(--t-xs); color: var(--ink3); white-space: nowrap; }
.nxi .tm small, .nxi .tx small { font-size: var(--t-2xs); color: var(--ink3); opacity: .8; }
.nxi .tx { display: flex; flex-direction: column; min-width: 0; }
.nxn { min-width: 0; padding: 0; font: inherit; color: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.nxn[disabled] { cursor: default; color: inherit; opacity: 1; }
.nxi .tx .nxmsg { margin: 2px 0 4px; font-size: var(--t-xs); color: var(--ink2); opacity: 1; white-space: pre-wrap; animation: dd-rise var(--m-add) var(--ease-out) both; }
.nxi.off .tx { color: var(--ink3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink3) 60%, transparent); }
.xp { padding: 1px 9px; border-radius: 999px; background: var(--soft); color: var(--ink2); font: 500 var(--t-2xs) var(--font); }
.xp.on { background: var(--ink); color: var(--surface); }
.nxnone { font-size: var(--t-sm); color: var(--ink3); }
.wll { display: flex; flex-direction: column; gap: 2px; }
.wli { position: relative; padding: 3px 0 3px 14px; font-size: var(--t-sm); line-height: 1.45; }
.wli::before { content: ''; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--care-d); }
.wli b { font-weight: 500; }
.wli.dflt { color: var(--ink3); cursor: pointer; border-radius: 8px; }
.wli.dflt::before { background: var(--line); box-shadow: inset 0 0 0 1px var(--ink3); }
.wll .cpop { margin: 4px 0 6px; }

/* ---------- The plan beside Chat ---------- */
.cpside .cplines .plines { font-size: var(--t-sm); }
.cpside .pln { display: block; cursor: pointer; padding: 5px 6px; }
.cpside .pln.isai .aitag { margin-right: 6px; vertical-align: 1px; }
.cpside .pln .ptx { display: inline; }
.cpside .pln .pend { display: flex; margin-top: 4px; }
.cpside .pln .pend:empty { display: none; }
.cpside .pln:hover { background: color-mix(in srgb, var(--app) 55%, transparent); }
.cpside .pend { margin-left: 0; }
.cpside .chp { white-space: normal; text-align: left; }
.cpside .hist, .cpside .cpop, .cpside .tpick { margin-left: 0; margin-right: 0; }
.cpside .cphd .pill { margin-left: auto; }
.cpnext { flex: none; padding: 8px 16px 12px; border-top: 1px solid var(--cardline); }
.cpnext .nxl { max-height: 160px; }
.pnone { padding: 18px 8px; color: var(--ink3); font-size: var(--t-sm); }
.lnk { color: var(--sage-d); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- The "@" menu as rows (js/ui/at-list.js with icons) ---------- */
.at-list.menu { flex-direction: column; flex-wrap: nowrap; width: 290px; max-height: 360px; overflow-y: auto; padding: 4px; border-radius: 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 18px 36px -18px rgba(20, 20, 20, .45); }
.at-list.menu .at-g { margin: 6px 10px 2px; font-size: var(--t-2xs); }
.at-i.row { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px; border-radius: 9px; text-align: left; font-size: var(--t-sm); }
.at-i.row.on { background: var(--soft); }
/* Only the marked row is lit (the mouse marks the row it is over, js/ui/at-list.js): no second lit row on hover. */
.at-list .at-i.row:not(.on):hover { background: transparent; }
.at-i.row .ico { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--note); color: var(--note-d); }
.at-i.row .ico svg { width: 12px; height: 12px; }
.at-i.row small { margin-left: auto; padding-left: 8px; color: var(--ink3); font-size: var(--t-2xs); }

/* ---------- One column at phone width ---------- */
@media (max-width: 880px) {
  .pask { display: inline-flex; }
  .ptab.wb { grid-template-columns: minmax(0, 1fr); }
  .wdoc { min-height: 0; padding: 8px 8px 14px; }
  .ptx { flex-basis: 220px; }
  .chp { white-space: normal; flex-wrap: wrap; max-width: 100%; text-align: left; }
  .chp b, .chp .dm { white-space: nowrap; }
  .tpick, .cpop, .hist { margin-left: 8px; }
  .pln.i1 { margin-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .prow.in, .pend > *, .tpick, .cpop, .hist.in, .u { animation: none; }
}