/* tags, pills, and every card template */

/* ---------- chips: colour means CHANNEL and STATUS by default --------------
   Campaign and pillar chips are neutral until Alan assigns one of the Eight
   in Settings (data-fn arrives from App.fn, the single attribute writer).

     channel -> dim-tint pill, bright text, square dot (the kit's .chip)
     status  -> traffic-light dot + coloured text (the kit's .st pattern)
     campaign / pillar -> neutral hairline pill (function-tinted when assigned)

   --c* comes from [data-fn], --sc/--sc-dim from [data-status]; both maps
   live in 1-tokens.css. Every dot is a rounded SQUARE (DS lock 2026-08-07:
   radius = size/3; circles only for avatars, radios, switch knobs). */
.tag{
  display:inline-flex;align-items:center;gap:var(--space-2);
  height:22px;padding:0 var(--space-3);
  border-radius:var(--radius-pill);
  font-size:var(--text-caption);font-weight:var(--weight-medium);line-height:1;
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out);
}
.card .tag,.kcard .tag{max-width:100%;overflow:hidden}

/* CHANNEL -- the kit's chip: dim bg, bright text, square dot */
.tag.ch{background:var(--c-dim);color:var(--c-bright);font-weight:600;font-size:10.5px;letter-spacing:.02em}
[data-theme="light"] .tag.ch{background:var(--c-tint);color:var(--c-deep)}
.tag.ch::before{content:"";width:5px;height:5px;border-radius:2px;flex:none;background:currentColor}

/* NEUTRAL by default -- campaign and pillar. When Settings assigns a colour,
   [data-fn] resolves --c* and the same chip quietly takes the tint. */
.tag.ghost{background:transparent;border:1px solid var(--border-2);color:var(--text-2)}
.tag.ghost[data-fn]:not([data-fn=""]){background:var(--c-dim);border-color:transparent;color:var(--c-bright)}
[data-theme="light"] .tag.ghost[data-fn]:not([data-fn=""]){background:var(--c-tint);color:var(--c-deep)}
/* campaign chip, redesign form: hairline pill + hue DOT, text stays neutral
   (the mock's email-row tag) -- overrides the dim-fill treatment above */
.tag.cdot,.tag.ghost.cdot[data-fn]:not([data-fn=""]){
  background:transparent;border:1px solid var(--border-1);color:var(--text-2);
  font-weight:var(--weight-body);font-size:var(--text-eyebrow);
}
.tag.cdot i{width:6px;height:6px;border-radius:2px;flex:none;background:var(--c,var(--text-3))}
.tag.plain{font-family:var(--font-mono);font-size:var(--text-eyebrow);color:var(--text-3);border-color:var(--border-1)}
.tag.plain[data-fn]:not([data-fn=""]){color:var(--c-bright);border-color:transparent;background:var(--c-dim)}
[data-theme="light"] .tag.plain[data-fn]:not([data-fn=""]){color:var(--c-deep);background:var(--c-tint)}

/* STATUS -- the kit's .st line: coloured square dot + coloured semibold text.
   idea stays muted; published earns a check (the "posted" treatment). */
.tag.st{background:transparent;padding:0 var(--space-1);color:var(--sc,var(--text-3));font-weight:600;font-size:11.5px}
.tag.st::before{content:"";width:6px;height:6px;border-radius:2px;flex:none;background:currentColor}
.tag.st[data-status="idea"]{font-weight:400}
.tag.st[data-status="published"]::after{
  content:"";width:10px;height:10px;flex:none;background:currentColor;
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/contain no-repeat;
}
/* a solid pill variant where the chip needs to sit on artwork or in popovers */
.tag.st.fill{background:var(--sc-dim,var(--surface-2));padding:0 var(--space-3)}

/* status chips ON a card are tappable: one tap advances the status */
.card .tag.st,.frow .tag.st,.kcard .tag.st{cursor:pointer}
.card .tag.st:hover,.frow .tag.st:hover,.kcard .tag.st:hover{background:var(--surface-3)}

/* status as mono text + dot with a real tap target (the mock's email row) */
.stx{
  flex:none;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 6px;
  border-radius:var(--radius-pill);cursor:pointer;
  font-family:var(--font-mono);font-size:10.5px;color:var(--sc,var(--text-3));
}
.stx i{width:6px;height:6px;border-radius:2px;flex:none;background:currentColor}
.stx:hover{background:var(--surface-2)}

/* the mock's glass placeholders: a centered campaign name card on a dream
   wash, and a tiny mono pill for small media bands */
.glasscard{
  text-align:center;border:1px solid var(--glass-border);background:var(--glass-bg);
  -webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);
  box-shadow:var(--glass-highlight);border-radius:12px;padding:9px 14px;max-width:84%;
}
.glasscard .ge,.glasscard .gs{
  display:block;font-family:var(--font-mono);font-size:6.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-2);
}
.glasscard .gn{
  display:block;font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:13px;line-height:1.15;margin-top:3px;color:var(--text-1);
}
.glasscard .gs{display:none}
.glasscard.lg{padding:16px 26px;border-radius:16px;max-width:80%}
.glasscard.lg .ge{font-size:8px;letter-spacing:.22em}
.glasscard.lg .gn{font-size:19px;letter-spacing:-.01em;margin:5px 0 0}
.glasscard.lg .gs{display:block;font-size:7.5px;letter-spacing:.3em;margin-top:6px}
.glasscard.sm .gn{font-size:14px}
.gpill{
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.08em;color:var(--text-1);
  background:var(--glass-bg);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);
  border-radius:var(--radius-pill);padding:2px 8px;white-space:nowrap;
}

/* filter chips in the control row need a real touch target */
.chips .tag{height:28px;padding-right:var(--space-3);cursor:pointer}
.chips .tag:hover{background:var(--surface-2)}
.chips .tag:active{transform:var(--press)}

/* one dot rule for status dots AND board-column dots: --sc wins, --c is the
   fallback, neutral if neither attribute resolves. Rounded square, r=size/3. */
.dot{width:8px;height:8px;border-radius:2.5px;flex:none;background:var(--sc,var(--c,var(--text-3)))}
/* a dot with a REAL tap target (email rows, kanban feet) */
.dotb{
  width:24px;height:24px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);cursor:pointer;
}
.dotb:hover{background:var(--surface-2)}
.dotb .dot{width:7px;height:7px;border-radius:2.5px}

/* ---------- gallery card ---------- */
.card{
  display:flex;flex-direction:column;gap:var(--space-2);
  background:var(--surface-1);
  border:1px solid var(--border-1);
  border-radius:var(--radius-lg);
  box-shadow:none;                          /* dark: border-first */
  overflow:hidden;cursor:pointer;position:relative;
  transition:box-shadow var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
[data-theme="light"] .card{box-shadow:var(--shadow-1)}
.card:hover{background:var(--surface-2);border-color:var(--border-2);box-shadow:var(--shadow-float);transform:translateY(-1px)}
[data-theme="light"] .card:hover{background:var(--surface-1)}
.card:active{transform:var(--press)}
.card .media{aspect-ratio:var(--ar,1/1);background:var(--sunken);overflow:hidden}
.card .media img{width:100%;height:100%;object-fit:cover}
.card .body{padding:0 var(--space-3) var(--space-3);display:flex;flex-direction:column;gap:7px}
/* the mock's uniform grid card: one-line title, two-line sub, no fades */
.card .t{
  font-size:var(--text-body-sm);font-weight:var(--weight-semibold);line-height:var(--leading-tight);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card .d{
  font-size:var(--text-caption);color:var(--text-2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* one line, cut clean with a fade -- stacked wrapping chips read as clutter
   (Alan: "lining them up in the same line? Or limiting/cutting them off?") */
.card .tags{
  display:flex;flex-wrap:nowrap;gap:5px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 92%,transparent 100%);
}
.card .tags .tag{flex:none}
/* the mock's grid-card footer: channel chip, mono date at the right, dot */
.card .gfoot{display:flex;align-items:center;gap:7px;min-height:24px}
.card .gfoot .mt{
  margin-left:auto;font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.card .gfoot .dotb{flex:none}

/* artwork placeholder -- an empty grey box reads as a broken image. Empty
   slots take the CAMPAIGN's dream wash with the glass name card (the mock's
   placeholder); a campaign with no assigned hue melts iridescent. */
.media.ph,.th.ph{
  display:flex;align-items:center;justify-content:center;
  background-color:var(--dream-base);
  background-image:var(--c-dream,var(--gradient-dream-iridescent));
  color:var(--text-1);
  font-family:var(--font-mono);font-size:var(--text-micro);
  border:1px solid var(--border-1);
}

/* selection -- Operations is the interaction colour everywhere.
   The pick control only exists in selection mode (the toolbar Select toggle
   sets body.picking) or on desktop hover -- the permanently-visible empty
   circle on touch read as "a hole" and is gone. */
.card.sel,.frow.sel,.erow.sel{outline:2px solid var(--awol-operations);outline-offset:2px}
.pick{
  position:absolute;top:var(--space-2);right:var(--space-2);width:26px;height:26px;
  border-radius:var(--radius-pill);background:var(--surface-1);
  border:1px solid var(--border-2);box-shadow:var(--shadow-1);
  display:none;align-items:center;justify-content:center;
  font-size:12px;color:var(--text-1);z-index:2;
}
@media (hover:hover){.card:hover .pick,.erow:hover .pick,.kcard:hover .pick,.frow:hover .pick{display:flex}}
.card.sel .pick,.erow.sel .pick,.kcard.sel .pick,.frow.sel .pick,body.picking .pick{display:flex}
.card.sel .pick,.erow.sel .pick,.kcard.sel .pick,.frow.sel .pick{background:var(--awol-operations);color:#141416;border-color:transparent}
/* email rows and kanban cards are flex layouts, not positioned cards -- the
   same pick control sits inline as a real flex child instead of floating
   absolute over artwork that isn't there (Alan's "checkbox doesn't work"
   report: these two card types had NO select control at all before this) */
.pick.inline{position:static;flex:none;box-shadow:none;background:transparent;border-color:transparent}
.pick.inline:hover{background:var(--surface-3)}
.erow.sel .pick.inline,.kcard.sel .pick.inline{background:var(--awol-operations)}

/* Field visibility -- one attribute write on the container toggles a field
   everywhere, with no branches in the card templates. The show rules must
   restore the RIGHT display value: the clamped title needs -webkit-box, so a
   blanket display:block would silently kill the clamp. */
[data-fields] [data-f]{display:none}
[data-fields~="media"] [data-f="media"]{display:block}
[data-fields~="media"] [data-f="media"].ph{display:flex}
[data-fields~="media"] .erow [data-f="media"]{display:flex}
[data-fields~="title"] [data-f="title"]{display:block}
[data-fields~="caption"] [data-f="caption"]{display:block}
[data-fields~="caption"] .card [data-f="caption"]{display:-webkit-box}
[data-fields~="tags"] [data-f="tags"]{display:flex}
[data-fields~="date"] [data-f="date"]{display:inline}
[data-fields~="status"] [data-f="status"]{display:inline-flex;align-self:center}
[data-fields~="campaign"] [data-f="campaign"]{display:inline-flex}
[data-fields~="channel"] [data-f="channel"]{display:inline-flex}
[data-fields~="pillar"] [data-f="pillar"]{display:inline-flex}

/* ---------- feed card -- platform mimic (the mock) ----------
   Facebook: caption above media + Like/Comment/Share row.
   Instagram: icon row + handle-bold caption below media.
   Both variants live in the DOM; [data-ch] picks one. */
.frow{
  background:var(--surface-1);border:1px solid var(--border-1);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-1);
  overflow:hidden;position:relative;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.frow:hover{border-color:var(--border-2);transform:translateY(-1px)}
.fhead{display:flex;align-items:center;gap:10px;padding:var(--space-3) var(--space-4)}
.fhead .tag.st{margin-left:auto;flex:none}
/* the community kit's dream avatar -- iridescent wash instead of a flat fill */
.av{
  width:34px;height:34px;border-radius:var(--radius-pill);flex:none;position:relative;overflow:hidden;
  background-color:var(--dream-base);background-image:var(--gradient-dream-iridescent);
  border:1px solid var(--border-2);
}
.av img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
/* the brand donut avatar (mock): light disc + chassis ring, token-driven */
.av.logo{background-image:none;background:var(--text-1);border-color:transparent}
.av.logo::after{
  content:"";position:absolute;inset:7px;border-radius:50%;
  border:4.5px solid var(--bg-0);background:var(--text-1);
}
.fwho{flex:1;min-width:0}
.fhead .who{font-size:13.5px;font-weight:var(--weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fhead .when{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .media{aspect-ratio:var(--ar,1/1);background:var(--sunken)}
.frow .media img{width:100%;height:100%;object-fit:cover}
/* mask, not an overlay: fades the glyphs so it survives hover, drag and theme flip */
.cap{
  font-size:var(--text-body-sm);line-height:1.55;white-space:pre-wrap;
  max-height:calc(4 * 1.55 * 1em);overflow:hidden;cursor:pointer;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 2.2em),transparent 100%);
          mask-image:linear-gradient(180deg,#000 calc(100% - 2.2em),transparent 100%);
}
.cap.short,.cap.open{-webkit-mask-image:none;mask-image:none}
.cap.open{max-height:none}
.frow .cap{padding:0 var(--space-4) var(--space-3);color:var(--text-1)}
.frow .igcap{padding-top:2px;font-size:var(--text-caption);color:var(--text-2);max-height:calc(2 * 1.55 * 1em + 2px)}
.frow .igcap.open{max-height:none}
.frow .igcap b{color:var(--text-1);font-weight:var(--weight-semibold)}
.frow .tags{padding:0 var(--space-4) var(--space-3)}
/* the mimic action rows; the .real cluster at the right is OURS (copy /
   notes / save) so the row is honest, not pure theatre */
.prow-fb{display:flex;align-items:center;border-top:1px solid var(--border-1);padding:4px 8px;margin-top:2px}
.prow-fb>.pact{flex:1;justify-content:center}
.prow-fb>.pact u{text-decoration:none}
.prow-ig{display:flex;align-items:center;gap:6px;padding:8px 10px 2px}
.pact{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:7px 9px;border-radius:var(--radius-pill);
  font-size:var(--text-caption);color:var(--text-3);position:relative;
}
.pact em{font-style:normal;font-family:var(--font-mono);font-size:9px;color:var(--text-2)}
.real{margin-left:auto;display:inline-flex;flex:none}
.real .pact{cursor:pointer;color:var(--text-2)}
.real .pact:hover{background:var(--surface-2);color:var(--text-1)}
.real .pact.dim{cursor:default;color:var(--text-3)}
/* one platform per card: CSS picks the variant, templates stay branch-free.
   (0,3,0) beats the [data-fields] show rules at (0,2,0) -- no !important. */
.frow[data-ch="facebook"] .prow-ig,.frow[data-ch="facebook"] .igcap{display:none}
.frow[data-ch="instagram"] .prow-fb,.frow[data-ch="instagram"] .fbcap{display:none}

/* ---------- email rows -- the mock's inbox ListCard --------------------- */
.elist{
  display:flex;flex-direction:column;max-width:860px;margin:0 auto;width:100%;
  background:var(--surface-1);border:1px solid var(--border-1);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-float);overflow:hidden;
}
.erow{
  position:relative;display:flex;align-items:center;gap:13px;
  padding:13px 16px;cursor:pointer;min-width:0;
}
.erow+.erow::after{
  content:"";position:absolute;top:0;left:75px;right:0;border-top:1px solid var(--border-1);
}
.erow:hover{background:var(--surface-2)}
/* 46px campaign-dream thumb (real artwork when the record has it) */
.erow .tile{
  flex:none;width:46px;height:46px;border-radius:12px;overflow:hidden;
  background-color:var(--dream-base);
  background-image:var(--c-dream,var(--gradient-dream-iridescent));
  display:flex;align-items:center;justify-content:center;
}
.erow .tile img{width:100%;height:100%;object-fit:cover}
.erow .tile .gpill{font-size:7px;letter-spacing:.14em;padding:2px 6px}
.erow .rm{flex:1;min-width:0}
.erow .rm b{
  display:block;font-size:14px;font-weight:var(--weight-semibold);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.erow .rm small{
  display:block;font-size:12px;color:var(--text-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.erow .edt{flex:none;font-family:var(--font-mono);font-size:var(--text-eyebrow);color:var(--text-3);white-space:nowrap;width:46px;text-align:right}
@media (max-width:767px){
  .erow .tag.cdot{display:none}
}
@media (max-width:639px){
  .erow .edt{display:none;width:auto}
}

/* ---------- kanban card -- the kit's .post ---------- */
.kcard{
  background:var(--surface-1);border:1px solid var(--border-1);
  border-radius:16px;box-shadow:var(--shadow-1);
  padding:12px 13px;display:flex;flex-direction:column;gap:var(--space-2);
  cursor:grab;user-select:none;-webkit-user-select:none;
  /* pan-y, not none: a finger starting on a card must still scroll the column.
     The drag arms on a 220ms long-press, which pan-y does not swallow. */
  touch-action:pan-y;
  transition:border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.kcard:hover{border-color:var(--border-2);transform:translateY(-1px);box-shadow:var(--shadow-float)}
.kcard .pr{display:flex;align-items:center;gap:6px}
.kcard .pr time{
  font-family:var(--font-mono);font-size:11px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.kcard .pr .tag{margin-left:auto;flex:none}
.kcard .kmedia{height:64px;width:100%;border-radius:10px;object-fit:cover;background:var(--sunken)}
.kcard .kmedia.ph{
  display:flex;align-items:center;justify-content:center;
  background-color:var(--dream-base);
  background-image:var(--c-dream,var(--gradient-dream-iridescent));
}
.kcard .t{
  margin:0;font-size:12.5px;font-weight:var(--weight-medium);line-height:1.45;color:var(--text-1);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.kcard .kfoot{display:flex;align-items:center;gap:7px}
.kcard .kfoot .kc{
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
/* the mock's advance chevron: a round hairline button that cycles status */
.advb{
  margin-left:auto;flex:none;width:24px;height:24px;
  border:1px solid var(--border-2);border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-2);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.advb:hover{background:var(--surface-3);color:var(--text-1)}
.drag-ghost{position:fixed;z-index:70;pointer-events:none;width:240px;box-shadow:var(--shadow-3);transform:rotate(2deg);opacity:.95}
.drag-src{opacity:.4}

/* ---------- campaign card -- dream hero + glass name + progress ---------- */
.ccard{
  background:var(--surface-1);border:1px solid var(--border-1);
  border-radius:var(--radius-lg);box-shadow:none;overflow:hidden;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
[data-theme="light"] .ccard{box-shadow:var(--shadow-1)}
.ccard:hover{border-color:var(--border-2);transform:translateY(-1px);box-shadow:var(--shadow-float)}
.chero-sm{
  height:110px;display:flex;align-items:center;justify-content:center;
  background-color:var(--dream-base);
  background-image:var(--c-dream,var(--gradient-dream-iridescent));
}
.ccard .in{padding:var(--space-4) var(--space-4) 15px;display:flex;flex-direction:column;gap:5px}
.ccard .n{
  font-family:var(--font-display);font-size:17px;font-weight:var(--weight-display);
  letter-spacing:-.01em;line-height:var(--leading-heading);
}
.ccard .when,.ccard .cnts{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-3)}
.cfoot{display:flex;align-items:center;gap:6px;margin-top:6px;min-width:0}
.cfoot .cnts{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.prog{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-3);
}
.prog i{width:6px;height:6px;border-radius:2px;flex:none;background:var(--text-3)}
.prog[data-tone="ok"]{color:var(--ok)}
.prog[data-tone="ok"] i{background:var(--ok)}
.prog[data-tone="warn"]{color:var(--warn)}
.prog[data-tone="warn"] i{background:var(--warn)}