/* Daily Life Doc, round 28 (zone O, item 5): the Organize sheet (js/plan/plan-organize.js, plan-organize-list.js):
   what Organize found, ONE numbered list (the new plan as Approve writes it: a tick per change, "was 7" on a moved
   line, the old words struck above new ones, "New", the removed lines struck under "Removed"), and the box "Tell
   Organize what to change" with the expert's words above it. Tokens from css/base.css; the findings' rows (.orgfs,
   .orgf, .orgk, .orgs) are drawn by css/plan-pub.css. */

@media (min-width: 881px) { .sheet.org, .sheet.org.tall { width: min(720px, calc(100% - 48px)); } }

/* The list: tick · number · words · tag, one row per line; a change sits on a quiet tint. */
.orgn { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.orgr { display: grid; grid-template-columns: 22px 22px minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline;
  padding: 7px 10px; border-radius: 10px; font-size: var(--t-sm); color: var(--ink2); transition: background-color 160ms ease, opacity 160ms ease; }
.orgr.chg { background: color-mix(in srgb, var(--sage) 9%, transparent); color: var(--ink); }
.orgck { width: 16px; height: 16px; margin: 0; align-self: center; accent-color: var(--sage-d); cursor: pointer; }
span.orgck { cursor: default; }
.orgno { font-size: var(--t-xs); font-weight: 600; color: var(--ink3); text-align: right; font-variant-numeric: tabular-nums; }
.orgw { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.orgold { color: var(--ink3); text-decoration-color: color-mix(in srgb, var(--ink3) 70%, transparent); }
.orgtx { color: inherit; }
.orgmk { font-size: var(--t-2xs); color: var(--ink3); }
.orgmk s { margin-right: 2px; }
/* Round 29 (FX10, F9): the tag is a sage tint with the dark sage words (light) or the pale sage words (dark), from the
   theme's tokens: --soft on a changed row's tint read faintly in dark mode. */
.orgtag { justify-self: end; padding: 1px 7px; border-radius: 7px; background: color-mix(in srgb, var(--sage) 24%, transparent);
  color: var(--sage-d); font-size: var(--t-2xs); font-weight: 600; white-space: nowrap; }
.orgr.gone .orgtx { color: var(--ink3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink3) 70%, transparent); }
.orgr.gone { background: transparent; }
.orgr.off .orgtag { opacity: .55; }
.orgr.out .orgtx { color: var(--ink3); }
.orglist .orgrmh { position: static; background: transparent; padding-left: 10px; margin-top: 10px; }
.orgfind .orgfs { margin-bottom: 12px; }
/* Round 28 (zone P2): at every width the findings read as at a phone width, the short word inline before its sentence
   (was a 112 px column: a wide gap after "Count", and the sentences far right of the list's words). The rows sit in from
   the sheet's edge as the list's rows do. */
.orgfind .orgfs { padding: 0 10px; }
.orgfind .orgf { display: block; }
.orgfind .orgk { display: inline-block; margin-right: 6px; vertical-align: 1px; }
.orgfind .orgs { display: inline; }

/* The box under the list: the expert's words above it, each with "Reading…" while the call works. */
.orgask { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.orgsaid { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.orgsaid:empty { display: none; }
.orgme { display: flex; align-items: baseline; gap: 8px; max-width: 85%; animation: dd-pop 240ms var(--ease-out) both; }
.orgmw { padding: 7px 12px; border-radius: 14px; background: var(--soft); color: var(--ink); font-size: var(--t-sm); overflow-wrap: anywhere; }
.orgme .qw { order: -1; font-size: var(--t-xs); animation: dd-wait 1.2s ease-in-out infinite; }
.orgform { display: flex; align-items: flex-end; gap: 6px; }
.orgin { flex: 1; min-width: 0; min-height: 40px; max-height: 140px; border: 0; border-radius: 20px; padding: 10px 14px; resize: none;
  background: var(--soft); color: var(--ink); font: inherit; font-size: var(--t-sm); line-height: 1.4; }
.orgin::placeholder { color: var(--ink3); }
.orgin:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--sage) 35%, transparent); }

@media (max-width: 640px) {
  .orgr { grid-template-columns: 20px 18px minmax(0, 1fr); column-gap: 6px; padding: 7px 8px; }
  .orgtag { grid-column: 3; justify-self: start; margin-top: 3px; }
  .orgin { font-size: var(--t-m); }
}