/* SCF Sale Calendar, the design link preview card and the copywriter panel. Wave 4, for Ari.

   Two surfaces, one card. The panel is linen and the studio is near black, so the card takes its ground,
   its ink and its rule from four small variables and the studio simply repoints them. Nothing here is
   redefined only inside a media query.

   The service colours below are a fixed categorical data set, exactly like the --ch-* channel colours in
   calendar.css. They are identity, not a second brand accent: a designer finds a Figma link by its mark
   before reading a word, which is the whole point of the card. Everything else on the card is a token. */

:root {
  --sv-figma-1: #F24E1E;
  --sv-figma-2: #A259FF;
  --sv-figma-3: #FF7262;
  --sv-figma-4: #1ABCFE;
  --sv-figma-5: #0ACF83;
  --sv-canva: #00A3B0;
  --sv-drive-1: #1A73E8;
  --sv-drive-2: #2E9E5B;
  --sv-drive-3: #C99A08;
  --sv-dropbox: #0061FF;
  --sv-shopify: #5E8E3E;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sv-figma-1: #FF7A52;
    --sv-figma-2: #BC8CFF;
    --sv-figma-3: #FF9285;
    --sv-figma-4: #5CD2FF;
    --sv-figma-5: #4FE0A8;
    --sv-canva: #35CBD6;
    --sv-drive-1: #6EA8F5;
    --sv-drive-2: #63C68B;
    --sv-drive-3: #E0BC4C;
    --sv-dropbox: #5C9AFF;
    --sv-shopify: #93B981;
  }
}

:root[data-theme="dark"] {
  --sv-figma-1: #FF7A52;
  --sv-figma-2: #BC8CFF;
  --sv-figma-3: #FF9285;
  --sv-figma-4: #5CD2FF;
  --sv-figma-5: #4FE0A8;
  --sv-canva: #35CBD6;
  --sv-drive-1: #6EA8F5;
  --sv-drive-2: #63C68B;
  --sv-drive-3: #E0BC4C;
  --sv-dropbox: #5C9AFF;
  --sv-shopify: #93B981;
}

/* ---------------------------------------------------------------- the card */

.lk {
  /* the four the studio repoints */
  --lk-ground: var(--linen-2);
  --lk-ink: var(--ink);
  --lk-ink-2: var(--muted);
  --lk-rule: var(--rule);
  --lk-eyebrow: var(--accent-strong);
  --lk-ring: var(--accent-strong);

  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--lk-rule);
  border-radius: var(--r-md);
  background: var(--lk-ground);
}

.lk-shot {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 84px;
  height: 63px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: color-mix(in srgb, var(--lk-ink) 6%, transparent);
}

.lk-sm .lk-shot { width: 56px; height: 42px; }

.lk-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.lk-img.is-in { opacity: 1; }
.lk.has-shot .lk-mark { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .lk-img { transition: opacity .2s var(--ease); }
  .lk-mark { transition: opacity .2s var(--ease); }
}

/* ---------------------------------------------------------------- the marks */

.lk-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--lk-ink) 8%, transparent);
}
.lk-sm .lk-mark { width: 26px; height: 26px; }

/* Figma. Five cells in two columns, the bottom right left open, which is the shape of the mark itself. */
.lk-mark-figma {
  grid-template-columns: 8px 8px;
  grid-template-rows: 8px 8px 8px;
  place-items: stretch;
  background: transparent;
}
.lk-sm .lk-mark-figma { grid-template-columns: 6px 6px; grid-template-rows: 6px 6px 6px; }
.lk-mark-figma i { display: block; }
.lk-mark-figma i:nth-child(1) { grid-area: 1 / 1; background: var(--sv-figma-1); border-radius: 50% 0 0 50%; }
.lk-mark-figma i:nth-child(2) { grid-area: 1 / 2; background: var(--sv-figma-2); border-radius: 0 50% 50% 0; }
.lk-mark-figma i:nth-child(3) { grid-area: 2 / 1; background: var(--sv-figma-3); border-radius: 50% 0 0 50%; }
.lk-mark-figma i:nth-child(4) { grid-area: 2 / 2; background: var(--sv-figma-4); border-radius: 50%; }
.lk-mark-figma i:nth-child(5) { grid-area: 3 / 1; background: var(--sv-figma-5); border-radius: 50%; }

/* Canva. A ring opened on one side, which is the letter it is named for. */
.lk-mark-canva { background: transparent; }
.lk-mark-canva i {
  display: block;
  width: 22px;
  height: 22px;
  border: 3.5px solid var(--sv-canva);
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-40deg);
}
.lk-sm .lk-mark-canva i { width: 17px; height: 17px; border-width: 3px; }

/* Google Drive. Three pieces standing in a triangle. */
.lk-mark-drive { background: transparent; position: relative; }
.lk-mark-drive i {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 6px;
  bottom: 6px;
}
.lk-mark-drive i:nth-child(1) { background: var(--sv-drive-3); clip-path: polygon(50% 0, 76% 46%, 24% 46%); }
.lk-mark-drive i:nth-child(2) { background: var(--sv-drive-1); clip-path: polygon(21% 52%, 47% 100%, 0 100%); }
.lk-mark-drive i:nth-child(3) { background: var(--sv-drive-2); clip-path: polygon(79% 52%, 100% 100%, 53% 100%); }

/* Dropbox. Four rhombuses in the cluster the box is drawn from. */
.lk-mark-dropbox {
  grid-template-columns: 11px 11px;
  grid-template-rows: 9px 9px;
  place-items: stretch;
  background: transparent;
}
.lk-sm .lk-mark-dropbox { grid-template-columns: 9px 9px; grid-template-rows: 7px 7px; }
.lk-mark-dropbox i {
  display: block;
  background: var(--sv-dropbox);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.lk-mark-dropbox i:nth-child(3), .lk-mark-dropbox i:nth-child(4) { opacity: .72; }

/* The three that carry one of the app's own icons rather than a drawn shape. */
.lk-mark-shopify { color: var(--sv-shopify); }
.lk-mark-image { color: var(--accent-strong); }
.lk-mark-other { color: var(--lk-ink-2); }
.lk-mark .ic { width: 18px; height: 18px; }
.lk-sm .lk-mark .ic { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- the words */

/* Three roles, each differing from the one above in font, size, weight, tracking and colour. */
.lk-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lk-eyebrow {
  font: 700 10px/1.2 var(--f-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lk-eyebrow);
}

.lk-name {
  font: 700 15px/1.25 var(--f-display);
  letter-spacing: -.01em;
  color: var(--lk-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lk-sm .lk-name { font-size: 13.5px; }

.lk-sub {
  font: 400 11.5px/1.35 var(--f-ui);
  color: var(--lk-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lk-sub.is-quiet { white-space: normal; }
.lk-sm .lk-sub { font-size: 11px; }

/* ---------------------------------------------------------------- the open control */

.lk-open {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--lk-rule);
  border-radius: 999px;
  background: transparent;
  color: var(--lk-ink);
  font: 500 12px/1 var(--f-ui);
  text-decoration: none;
}
.lk-open .ic { width: 14px; height: 14px; }
.lk-open:active { transform: scale(.97); }
.lk-sm .lk-open { padding: 5px 8px; }
.lk-sm .lk-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .lk-open:hover { border-color: var(--lk-ring); color: var(--lk-ring); }
}
@media (prefers-reduced-motion: no-preference) {
  .lk-open { transition: transform .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease); }
}

/* ---------------------------------------------------------------- the writer control */

.lk-write {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-strong);
  font: 500 12px/1 var(--f-ui);
  cursor: pointer;
}
.lk-write .ic { width: 14px; height: 14px; }
.lk-write:active { transform: scale(.97); }
.lk-write.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

@media (hover: hover) and (pointer: fine) {
  .lk-write:hover { border-color: var(--accent-strong); }
  .lk-write.is-on:hover { background: var(--accent-deep); }
}
@media (prefers-reduced-motion: no-preference) {
  .lk-write { transition: transform .12s var(--ease), border-color .12s var(--ease), background-color .12s var(--ease); }
}

/* ---------------------------------------------------------------- the writer panel */

.lk-writer {
  margin: 8px 0 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--linen-2);
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .lk-writer { animation: lk-open .18s var(--ease) both; }
}
@keyframes lk-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.lk-writer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 12px;
  border-bottom: 1px solid var(--rule);
}

.lk-writer-eyebrow {
  flex: 1 1 auto;
  min-width: 0;
  font: 700 10px/1.2 var(--f-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lk-tones { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.lk-tone {
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: 500 11.5px/1 var(--f-ui);
  cursor: pointer;
}
.lk-tone.is-on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .lk-tone:not(.is-on):hover { color: var(--ink); }
}

.lk-writer-x {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.lk-writer-x .ic { width: 16px; height: 16px; }
.lk-writer-x:active { transform: scale(.97); }

/* Floating, for the studio. The copy bar there is a short horizontal scroller, so an inline panel would be
   clipped by it. This one lifts off the surface, opens upward from its control and carries a stronger rule
   in place of a shadow, because only the drag and the drawer are allowed a shadow. */
.lk-writer.is-float {
  position: fixed;
  z-index: 6;
  margin: 0;
  max-height: min(52vh, 460px);
  display: flex;
  flex-direction: column;
  border-width: 1.5px;
}
.lk-writer.is-float .lk-writer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

@media (prefers-reduced-motion: no-preference) {
  .lk-writer.is-float { animation: lk-lift .18s var(--ease) both; }
}
@keyframes lk-lift { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.lk-writer-body { padding: 8px; }

.lk-writer-say {
  margin: 0;
  padding: 8px 4px;
  font: 400 13px/1.5 var(--f-ui);
  color: var(--ink-2);
}
.lk-writer-say.is-bad { color: var(--bad); }
.lk-writer-say.is-working { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .lk-writer-say.is-working { animation: lk-pulse 1.4s var(--ease) infinite; }
}
@keyframes lk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.lk-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.lk-opt-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
}
.lk-opt-t {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 13.5px/1.45 var(--f-ui);
  color: var(--ink);
}
.lk-opt-n {
  flex: 0 0 auto;
  padding-top: 2px;
  font: 500 11px/1.3 var(--f-ui);
  color: var(--muted);
}
.lk-opt-n.is-over { color: var(--bad); font-weight: 700; }
.lk-opt-btn:active { transform: scale(.995); }
@media (hover: hover) and (pointer: fine) {
  .lk-opt-btn:hover { border-color: var(--accent); }
}
@media (prefers-reduced-motion: no-preference) {
  .lk-opt-btn { transition: transform .12s var(--ease), border-color .12s var(--ease); }
}

.lk-writer-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px 2px;
}
.lk-writer-note {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 11.5px/1.4 var(--f-ui);
  color: var(--muted);
}
.lk-again {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: 500 12px/1 var(--f-ui);
  cursor: pointer;
}
.lk-again:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .lk-again:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
}

/* ---------------------------------------------------------------- inside the studio

   The studio pins its own dark tokens and never inherits the theme, so the card and the panel repoint
   to those rather than to the linen set. The accent stays the light powder blue with a dark ink on it,
   which is the studio's own rule. */

.st .lk {
  --lk-ground: var(--st-plinth);
  --lk-ink: var(--st-ink);
  --lk-ink-2: var(--st-ink-2);
  --lk-rule: var(--st-line);
  --lk-eyebrow: var(--st-accent);
  --lk-ring: var(--st-accent);
}
.st .lk-mark-image { color: var(--st-accent); }
.st .lk-mark-other { color: var(--st-dim); }

.st .lk-write { border-color: var(--st-line-2); color: var(--st-accent); }
.st .lk-write.is-on { background: var(--st-accent); border-color: var(--st-accent); color: var(--st-accent-ink); }
@media (hover: hover) and (pointer: fine) {
  .st .lk-write:hover { border-color: var(--st-accent); }
  .st .lk-write.is-on:hover { background: var(--st-accent); }
}

.st .lk-writer { border-color: var(--st-line); background: var(--st-plinth); }
.st .lk-writer-head { border-bottom-color: var(--st-line); }
.st .lk-writer-eyebrow { color: var(--st-ink-2); }
.st .lk-tones { background: rgba(255, 255, 255, .06); }
.st .lk-tone { color: var(--st-ink-2); }
.st .lk-tone.is-on { background: var(--st-accent); color: var(--st-accent-ink); }
.st .lk-writer-x { color: var(--st-dim); }
.st .lk-writer-say { color: var(--st-ink-2); }
.st .lk-writer-say.is-bad { color: var(--st-bad); }
.st .lk-opt-btn { background: rgba(255, 255, 255, .05); }
.st .lk-opt-t { color: var(--st-ink); }
.st .lk-opt-n { color: var(--st-dim); }
.st .lk-opt-n.is-over { color: var(--st-bad); }
.st .lk-writer-note { color: var(--st-dim); }
.st .lk-again { border-color: var(--st-line-2); color: var(--st-ink-2); }
.st .lk-open { border-color: var(--st-line-2); color: var(--st-ink); }
@media (hover: hover) and (pointer: fine) {
  .st .lk-opt-btn:hover { border-color: var(--st-accent); }
  .st .lk-again:hover { border-color: var(--st-accent); color: var(--st-accent); }
  .st .lk-open:hover { border-color: var(--st-accent); color: var(--st-accent); }
}
.st .lk :focus-visible,
.st .lk-write:focus-visible,
.st .lk-writer :focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- the two hosts that take a mark

   The panel's slot grid has its own 4 by 3 media box and sizes any icon inside it at 36px, which is wider
   than the tile. These two rules give the mark the room it needs without touching drawer.css. */

.dw-slot-glyph .lk-mark { width: 48px; height: 48px; border-radius: var(--r-md); }
.dw-slot-glyph .lk-mark .ic { width: 24px; height: 24px; }
.dw-slot-glyph .lk-mark-figma { grid-template-columns: 11px 11px; grid-template-rows: 11px 11px 11px; }
.dw-slot-glyph .lk-mark-canva i { width: 30px; height: 30px; border-width: 4.5px; }
.dw-slot-glyph .lk-mark-dropbox { grid-template-columns: 15px 15px; grid-template-rows: 12px 12px; }

/* On the studio stage a link is the lit object, because there is no artwork to light. The card grows to
   carry that job: the mark reads across the room and the design name takes the stage heading size. */
.st .lk-stage { position: relative; z-index: 1; width: min(560px, 92%); }
.st .lk-stage .lk { padding: 14px; gap: 18px; border-radius: var(--r-lg); }
.st .lk-stage .lk-shot { width: 148px; height: 111px; }
.st .lk-stage .lk-mark { width: 64px; height: 64px; border-radius: var(--r-md); }
.st .lk-stage .lk-mark .ic { width: 32px; height: 32px; }
.st .lk-stage .lk-mark-figma { grid-template-columns: 15px 15px; grid-template-rows: 15px 15px 15px; }
.st .lk-stage .lk-mark-canva i { width: 40px; height: 40px; border-width: 6px; }
.st .lk-stage .lk-mark-drive i { left: 10px; right: 10px; top: 12px; bottom: 12px; }
.st .lk-stage .lk-mark-dropbox { grid-template-columns: 20px 20px; grid-template-rows: 16px 16px; }
.st .lk-stage .lk-name { font-size: 22px; letter-spacing: -.015em; white-space: normal; }
.st .lk-stage .lk-sub { font-size: 12.5px; white-space: normal; }
.st .lk-stage .lk-open { padding: 8px 14px; font-size: 13px; }

@media (max-width: 719.98px) {
  .st .lk-stage { width: 94%; }
  .st .lk-stage .lk-shot { width: 96px; height: 72px; }
  .st .lk-stage .lk-name { font-size: 18px; }
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 599.98px) {
  .lk { gap: 10px; padding: 6px; }
  .lk-shot { width: 64px; height: 48px; }
  .lk-writer-head { flex-wrap: wrap; }
  .lk-writer-eyebrow { flex: 1 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .lk-writer { animation: none; }
  .lk-writer-say.is-working { animation: none; }
  .lk-img, .lk-mark, .lk-open, .lk-write, .lk-opt-btn { transition: none; }
  .lk-open:active, .lk-write:active, .lk-again:active, .lk-opt-btn:active, .lk-writer-x:active { transform: none; }
}

/* ---------------------------------------------------------------- Canva, the picker

   Wave 5. The organising idea is that a designer recognises her own work by looking at it, not by
   reading a file name, so the whole surface is her actual artwork at a size she recognises and every
   other thing on the screen is one line tall. Take the wall of thumbnails away and this is a file
   dialog, which is the thing the app already had and the thing she was avoiding.

   The room is linen rather than the studio's near black on purpose. This is a chooser and not a
   lighting rig: twenty small pictures at once read better on paper than on a dark ground, and the
   picker opens over the studio in the top layer, where a second dark surface would read as the same
   surface. Every colour here is a token, so both themes come out of `tokens.css`. */

.cv {
  width: min(1040px, 94vw);
  height: min(760px, 92vh);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--linen);
  color: var(--ink);
  overflow: hidden;
}
.cv::backdrop { background: var(--veil); }
.cv:not([open]) { display: none; }

.cv-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
}
.cv-shell > * { min-width: 0; }

@media (prefers-reduced-motion: no-preference) {
  .cv[open] { animation: cv-in .18s var(--ease) both; }
}
@keyframes cv-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- the head

   Four roles down the left, each different from the one above it in at least two of font, size, weight,
   tracking and colour. */

.cv-head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--rule);
}

.cv-head-id { flex: 1 1 auto; min-width: 0; }

.cv-eyebrow {
  display: block;
  font: 700 11px/1.2 var(--f-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.cv-title {
  margin: 4px 0 0;
  font: 700 26px/1.1 var(--f-display);
  letter-spacing: -.015em;
  color: var(--ink);
}

.cv-sub {
  margin: 4px 0 0;
  font: 500 13.5px/1.4 var(--f-ui);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cv-head-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

.cv-find {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 38px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
}
.cv-find .ic { width: 16px; height: 16px; flex: 0 0 auto; }
.cv-q {
  width: 200px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 13.5px/1 var(--f-ui);
}
.cv-q:focus { outline: none; }
.cv-find:focus-within { border-color: var(--accent-strong); }

.cv-x {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.cv-x .ic { width: 18px; height: 18px; }
.cv-x:active { transform: scale(.97); }

/* ---------------------------------------------------------------- the wall */

.cv-body { min-height: 0; overflow-y: auto; padding: 20px; }

/* With nothing to browse there is one object on the surface, so it takes the middle of the room and the
   two controls that could not do anything are gone. */
.cv.is-blank .cv-body { display: grid; place-items: center; }
.cv.is-blank .cv-find,
.cv.is-blank .cv-goes { display: none; }

.cv-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 16px;
}

.cv-tile { position: relative; min-width: 0; }

.cv-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.cv-shot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--linen-2);
  overflow: hidden;
}
.cv-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.cv-img[src] { opacity: 1; }

.cv-name {
  font: 500 13px/1.35 var(--f-ui);
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cv-meta {
  font: 400 11px/1.3 var(--f-ui);
  color: var(--muted);
}

/* The export control sits on the picture rather than under the name, because the tile itself is the
   pick and a second full width control would make a person choose before they had chosen. */
.cv-exp {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--accent-strong);
  cursor: pointer;
}
.cv-exp .ic { width: 15px; height: 15px; }
.cv-exp:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  /* On a pointer the control waits until the tile is wanted. On a touch screen there is no hover to
     wait for, so it simply stays visible, which is why the resting state above is the visible one. */
  .cv-exp { opacity: 0; }
  .cv-tile:hover .cv-exp,
  .cv-tile:focus-within .cv-exp { opacity: 1; }
  .cv-pick:hover .cv-shot { border-color: var(--accent-strong); }
  .cv-pick:hover .cv-name { color: var(--accent-strong); }
  .cv-x:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
  .cv-exp:hover { border-color: var(--accent-strong); }
}

@media (prefers-reduced-motion: no-preference) {
  .cv-pick .cv-shot { transition: border-color .12s var(--ease); }
  .cv-exp { transition: opacity .12s var(--ease), transform .12s var(--ease), border-color .12s var(--ease); }
  .cv-img { transition: opacity .2s var(--ease); }
}

/* Skeletons rather than a spinner, the same choice the month grid makes while it waits. */
.cv-tile.is-skel .cv-shot { background: var(--linen-2); border-color: var(--rule); }
.cv-skel-name { display: block; height: 12px; width: 70%; margin-top: 8px; border-radius: var(--r-sm); background: var(--linen-2); }

.cv-empty {
  margin: 0;
  padding: 32px 4px;
  font: 400 14px/1.5 var(--f-ui);
  color: var(--muted);
  text-align: center;
}

.cv-more { display: flex; justify-content: center; padding: 20px 0 4px; }
.cv-more-btn {
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: 500 13px/1 var(--f-ui);
  cursor: pointer;
}
.cv-more-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .cv-more-btn:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
}

/* ---------------------------------------------------------------- the two cards that are not a wall */

.cv-card {
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 28px 28px 32px;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.cv-card-eyebrow {
  display: block;
  font: 700 11px/1.2 var(--f-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.cv-card-title {
  margin: 8px 0 0;
  font: 700 22px/1.2 var(--f-display);
  letter-spacing: -.01em;
  color: var(--ink);
}

.cv-card-sub {
  margin: 8px 0 0;
  font: 500 14px/1.45 var(--f-ui);
  color: var(--ink-2);
}

.cv-card-copy {
  margin: 12px 0 0;
  font: 400 13.5px/1.55 var(--f-ui);
  color: var(--ink-2);
}

.cv-names {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cv-names li {
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--linen-2);
  font: 500 12px/1 var(--f-ui);
  color: var(--ink-2);
}

/* The one action on the card. It is an ink fill with linen type, the same primary the rest of the app
   uses, because the accent here is already spoken for by the Canva mark sitting inside the button. */
.cv-connect {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--linen);
  font: 500 14px/1 var(--f-ui);
  cursor: pointer;
}
.cv-connect .lk-mark { width: 26px; height: 26px; background: rgba(255, 255, 255, .1); }
.cv-connect .lk-mark-canva i { width: 17px; height: 17px; border-width: 3px; }
.cv-connect:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .cv-connect:hover { background: var(--ink-2); }
}
@media (prefers-reduced-motion: no-preference) {
  .cv-connect { transition: transform .12s var(--ease), background-color .12s var(--ease); }
}

/* ---------------------------------------------------------------- the foot */

.cv-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

.cv-goes { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
.cv-foot-label {
  font: 700 10px/1.2 var(--f-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.cv-slot {
  max-width: 240px;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--linen);
  color: var(--ink);
  font: 500 13px/1 var(--f-ui);
}

.cv-say {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 12.5px/1.4 var(--f-ui);
  color: var(--ink-2);
}
.cv-say.is-bad { color: var(--bad); }
.cv-say.is-good { color: var(--good); }
.cv-say.is-working { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .cv-say.is-working { animation: cv-pulse 1.4s var(--ease) infinite; }
}
@keyframes cv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* The export answer. Canva hands out an address that stops working after twenty four hours, so the link
   and the sentence saying so are one object and neither is shown without the other. */
.cv-dl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--accent-strong);
  border-radius: 999px;
  color: var(--accent-strong);
  font: 500 12.5px/1 var(--f-ui);
  text-decoration: none;
}
.cv-dl .ic { width: 14px; height: 14px; }
.cv-expiry { min-width: 0; font: 400 11.5px/1.4 var(--f-ui); color: var(--muted); }

.cv-off {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 500 12px/1 var(--f-ui);
  cursor: pointer;
}
.cv-off:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .cv-off:hover { border-color: var(--bad); color: var(--bad); }
}

/* ---------------------------------------------------------------- the door

   The control that opens the picker, wherever it is put. It reads as a sibling of the writer control,
   because they are the same kind of thing: a small offer of help beside the work. */

.cv-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: 500 12px/1 var(--f-ui);
  cursor: pointer;
}
.cv-open .lk-mark { width: 22px; height: 22px; }
.cv-open .lk-mark-canva i { width: 15px; height: 15px; border-width: 2.5px; }
.cv-open:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .cv-open:hover { border-color: var(--sv-canva); color: var(--ink); }
}
@media (prefers-reduced-motion: no-preference) {
  .cv-open { transition: transform .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease); }
}

/* Inside an empty creative slot in the panel. The slot is one big drop target with a label filling it,
   so the control sits under that label rather than inside it, and lifts above it so a click reaches the
   button rather than the file chooser behind it. */
.dw-slot .cv-open { position: relative; z-index: 1; display: flex; margin: 0 auto 12px; }

/* On the studio's dark ground the same control takes the studio's own line and ink, at the height the
   two controls beside it already stand at. */
.st-void-acts .cv-open { height: 34px; padding: 0 13px 0 6px; border-radius: var(--r-sm); font-size: 13px; }
.st .cv-open { border-color: var(--st-line-2); color: var(--st-ink-2); }
@media (hover: hover) and (pointer: fine) {
  .st .cv-open:hover { border-color: var(--sv-canva); color: var(--st-ink); }
}

/* ---------------------------------------------------------------- focus, narrow, still */

.cv :focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.cv-open:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.st .cv-open:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }

@media (max-width: 719.98px) {
  .cv { width: 100vw; height: 100vh; border-radius: 0; border: 0; }
  .cv-head { flex-wrap: wrap; gap: 12px; padding: 16px 16px 12px; }
  .cv-head-right { width: 100%; }
  .cv-find { flex: 1 1 auto; }
  .cv-q { width: 100%; }
  .cv-title { font-size: 22px; }
  .cv-body { padding: 16px; }
  .cv-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .cv-foot { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .cv-say { order: 3; flex: 1 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cv[open] { animation: none; }
  .cv-say.is-working { animation: none; }
  .cv-pick .cv-shot, .cv-exp, .cv-img, .cv-connect, .cv-open { transition: none; }
  .cv-x:active, .cv-exp:active, .cv-connect:active, .cv-more-btn:active, .cv-off:active, .cv-open:active { transform: none; }
}