/* ── markcutis v3 · Artifact Builder (mark-dash/artifacts.jsx) ───────────────
 * The left column's cards. Tokens from tokens.css; card chrome shares .card.
 * Phone rules live at the bottom, scoped like mobile.css. */
.art-canvas{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.art-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:stretch; }   /* cards in a row share one height */
@media (max-width:1000px){ .art-grid{ grid-template-columns:minmax(0,1fr); } }
.art-mono{ font-family:var(--font-mono); }
.art-muted{ color:var(--muted); }

/* "Add a card" bar — the closed state of the composer drawer */
.art-addbar{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; font:inherit; font-size:13px; font-weight:600; color:var(--ink); padding:10px 14px; border-radius:12px; border:1px dashed rgba(217,70,239,.35); background:rgba(217,70,239,.04); cursor:pointer; min-width:0; }
.art-addbar:hover{ border-color:rgba(217,70,239,.6); background:rgba(217,70,239,.08); }
.art-addbar:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; }
.art-addbar-plus{ color:var(--primary); font-size:15px; line-height:1; }
.art-addbar-hint{ font-weight:400; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.art-drawer{ animation:artRise .22s cubic-bezier(.22,.9,.3,1) both; }
.art-drawer-close{ font:inherit; font-size:18px; line-height:1; color:var(--ink); background:var(--raise); border:1px solid var(--raise-border); cursor:pointer; padding:4px 6px; border-radius:6px; }
.art-drawer-close:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
@media (max-width:700px){ .art-addbar-hint{ display:none; } }

/* composer */
.art-composer{ border:1px solid rgba(217,70,239,.35); border-radius:12px; background:linear-gradient(90deg,rgba(217,70,239,.10),rgba(217,70,239,.02)); padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.art-composer form{ display:flex; gap:8px; align-items:center; }
.art-composer input{ flex:1; min-width:0; font:inherit; font-size:14px; background:rgba(0,0,0,.35); border:1px solid var(--border-strong); color:var(--ink); border-radius:9px; padding:10px 12px; }
.art-composer input::placeholder{ color:var(--subtle); }
.art-composer input:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; }
.art-build{ border-color:transparent !important; background:var(--cta) !important; color:#062 !important; font-weight:600; white-space:nowrap; }
.art-build:disabled{ opacity:.5; }
.art-sugg{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.art-sugg-l{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--subtle); margin-right:4px; }
.art-sugg button{ font:inherit; font-size:11.5px; color:var(--ink); border:1px solid var(--raise-border); background:var(--raise); border-radius:9999px; padding:4px 10px; cursor:pointer; }
.art-sugg button:hover{ background:var(--raise-hover); }
.art-sugg button:disabled{ opacity:.5; cursor:default; }
.art-sugg .art-sugg-t{ border-style:dashed; margin-left:auto; }
.art-sugg .art-sugg-t.on{ border-color:var(--primary); background:var(--primary-dim); }
.art-templates{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:6px; }
.art-templates button{ display:flex; align-items:center; gap:8px; font:inherit; font-size:12px; color:var(--body); border:1px solid var(--border); background:rgba(255,255,255,.03); border-radius:9px; padding:8px 10px; cursor:pointer; text-align:left; min-width:0; }
.art-templates button:hover{ border-color:var(--border-strong); color:var(--ink); }
.art-templates button:disabled{ opacity:.4; cursor:default; }

/* card chrome */
.art-card{ padding:0 !important; overflow:visible; position:relative; min-width:0; animation:artRise .35s cubic-bezier(.22,.9,.3,1) both; }   /* the animation makes each card a stacking context — the menu is portalled to <body> (ArtMenu) so it never sits under the next card */
.art-card.has-spec{ overflow:hidden; }
.art-card.wide, .art-card.open{ grid-column:1 / -1; }   /* an open card takes the row: its table has room and its neighbour keeps its own height */
.art-card.pinned{ border-color:rgba(217,70,239,.45); }
.art-pin{ flex:none; font-family:var(--font-mono); font-size:10px; color:var(--primary); margin-right:4px; }
.art-card.busy{ opacity:.75; }
@keyframes artRise{ from{ opacity:.4; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .art-card{ animation:none; } .art-stage i{ animation:none !important; } .art-shimmer{ animation:none; } }
.art-head{ cursor:grab; padding-left:6px !important; }   /* GQCard header; the grip sits in the left gutter */
/* nothing is cut off inside a card: titles, subs and table cells wrap instead of ellipsing */
.gqc .art-lab, .gqc .art-ti, .gqc .art-sub, .gqc .art-link-t, .gqc .art-leg-t{ white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
.gqc a.art-link.has-src{ display:inline; }
.gqc .art-row, .gqc .art-queue .art-q, .gqc .art-ev{ align-items:start; padding:8px 0; }
.gqc .art-row:first-child, .gqc .art-queue .art-q:first-child, .gqc .art-ev:first-child{ padding-top:0; }
.gqc .art-sub{ margin-top:2px; }
.art-head:active{ cursor:grabbing; }
.art-grip{ font-size:11px; letter-spacing:-2px; color:var(--subtle); width:8px; margin-right:-4px; user-select:none; opacity:0; transition:opacity .18s; }
.art-card:hover .art-grip, .art-card:focus-within .art-grip{ opacity:1; }
.art-card:hover .art-grip{ color:var(--muted); }
/* drag and drop: the dragged card dims; the target shows a violet insertion edge */
.art-card.dragging{ opacity:.4; }
.art-card.drop-before{ box-shadow:0 -3px 0 0 var(--primary), 0 0 0 1px rgba(217,70,239,.35); }
.art-card.drop-after{ box-shadow:0 3px 0 0 var(--primary), 0 0 0 1px rgba(217,70,239,.35); }
.art-ic{ width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; }
.art-menu{ position:fixed; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:10px; padding:6px; display:flex; flex-direction:column; gap:2px; z-index:150; min-width:180px; max-height:calc(100vh - 16px); overflow-y:auto; box-shadow:0 20px 50px -20px rgba(0,0,0,.8); }   /* fixed + portalled: placed from the ⋯ button by ArtMenu; above the dashboard, below modals (300) */
.art-menu button{ font:inherit; font-size:12.5px; text-align:left; background:none; border:none; color:var(--ink); padding:7px 10px; border-radius:7px; cursor:pointer; }
.art-menu button:hover{ background:rgba(255,255,255,.06); color:var(--ink); }
.art-menu button.danger{ color:var(--red); }
.art-intent{ font-size:12.5px; color:var(--muted); line-height:1.45; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.art-link{ color:inherit; text-decoration:none; }
a.art-link{ color:var(--cta); }
@media (hover:hover){ a.art-link:hover{ color:var(--ink); text-decoration:underline; } }   /* touch screens keep no sticky hover underline */
/* the source affordance: a small word for where the link leads (Gmail · Drive · reuters.com) + ↗ */
a.art-link.has-src{ display:inline-flex; align-items:baseline; max-width:100%; min-width:0; vertical-align:bottom; }
.art-link-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.art-src{ flex:none; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.02em; color:var(--subtle); margin-left:5px; white-space:nowrap; }
a.art-link:hover .art-src{ color:var(--ink); }

/* rows (list, watchlist, folder) */
.art-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); }
.art-row:last-child{ border-bottom:none; }
.art-row-3{ grid-template-columns:minmax(0,1fr) auto auto; }
.art-row-f{ grid-template-columns:auto minmax(0,1fr) auto; }
.art-lab{ font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--body); }
.art-sub{ font-size:11px; color:var(--muted); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.art-val{ font-family:var(--font-mono); font-size:14px; font-variant-numeric:tabular-nums; text-align:right; color:var(--ink); white-space:nowrap; }
.art-val small{ font-size:10px; color:var(--muted); }
.art-right{ display:flex; align-items:center; gap:8px; }
.art-age{ font-size:11px; color:var(--subtle); white-space:nowrap; }
.art-delta{ font-family:var(--font-mono); font-size:11px; font-variant-numeric:tabular-nums; }
.art-delta.up{ color:var(--green); } .art-delta.dn{ color:var(--red); }
.art-spark{ display:block; }
.art-tag{ font-family:var(--font-mono); font-size:10px; padding:2px 6px; border-radius:5px; border:1px solid var(--border); color:var(--muted); white-space:nowrap; text-decoration:none; }
.art-tag.ok{ color:var(--green); border-color:rgba(95,214,160,.35); }
.art-tag.no{ color:var(--red); border-color:rgba(224,138,138,.4); }
.art-tag.warn{ color:#e0b45f; border-color:rgba(224,180,95,.4); }
.art-tag.live{ color:#3b9eff; border-color:rgba(59,158,255,.4); }   /* a figure: the blue provenance stamp (a research call's level) */
.art-fresh{ font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--muted); padding:6px 0 0; }
.art-fresh.fresh{ color:#3b9eff; }
.art-fresh.stale{ color:#e0b45f; }
.art-mini{ font:inherit; font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:6px; border:1px solid var(--raise-border); background:var(--raise); color:var(--ink); cursor:pointer; }
.art-mini:hover{ background:var(--raise-hover); }
.art-mini[data-paid], .art-mini.primary{ background:var(--cta); color:var(--cta-ink); border-color:transparent; }
.art-more{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:11px; padding-top:7px; }
.art-mini:disabled{ opacity:.5; cursor:default; }

/* kpi */
.art-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; }
.art-kpi{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:9px; background:rgba(255,255,255,.025); min-width:0; }
.art-kpi-n{ font-family:var(--font-ui); font-weight:600; font-size:20px; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1; }
.art-kpi-l{ font-size:11px; color:var(--muted); }

/* timeline */
.art-tl{ display:flex; flex-direction:column; }
.art-ev{ display:grid; grid-template-columns:52px 10px minmax(0,1fr) auto; gap:8px; align-items:center; padding:6px 0; }
.art-tm{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.art-dot{ width:8px; height:8px; border-radius:50%; background:var(--border-strong); }
.art-ev.now .art-dot{ background:var(--cta); }
.art-ev.now .art-tm{ color:var(--cta); }
.art-ev.past .art-ti{ color:var(--subtle); }
.art-ti{ font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--body); }

/* trend */
.art-trend{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.art-sm{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.art-sm-h{ display:flex; justify-content:space-between; font-size:12px; color:var(--body); }
.art-sm-h b{ font-family:var(--font-mono); font-weight:500; }
.art-big{ width:100%; height:54px; display:block; }

/* table, documents */
.art-tbwrap{ overflow-x:auto; }
.art-tb{ width:100%; border-collapse:collapse; font-size:12.5px; }
.art-tb th{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--subtle); text-align:left; padding:4px 6px 4px 0; border-bottom:1px solid var(--border); font-weight:500; white-space:nowrap; }
.art-tb td{ padding:6px 6px 6px 0; border-bottom:1px solid var(--border); vertical-align:top; color:var(--body); }
.art-tb tr:last-child td{ border-bottom:none; }
.art-tb td.num{ font-family:var(--font-mono); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* summary */
.art-sum p{ margin:0; font-size:13px; color:var(--body); line-height:1.5; text-wrap:pretty; }
.art-facts{ display:flex; flex-direction:column; gap:3px; margin-top:6px; }
.art-facts span{ font-size:11px; color:var(--muted); }
.art-facts b{ font-family:var(--font-mono); font-weight:500; color:var(--body); }

/* queue */
.art-queue .art-q{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); }
.art-queue .art-q:last-child{ border-bottom:none; }
.art-queue .art-q.done .art-ti{ text-decoration:line-through; color:var(--subtle); }
.art-queue .art-donebar{ justify-content:flex-start; padding-top:6px; }
.art-acts{ display:flex; gap:4px; }
.art-acts button{ font:inherit; font-size:11.5px; font-weight:600; padding:5px 10px; min-height:28px; border-radius:6px; border:1px solid var(--raise-border); background:var(--raise); color:var(--ink); cursor:pointer; }
.art-acts button:hover{ background:var(--raise-hover); }
.art-acts button:first-child{ background:var(--cta); color:var(--cta-ink); border-color:transparent; }   /* the primary move (Done) */
.art-acts button:disabled{ opacity:.5; cursor:default; }

/* building / failed / spec */
.art-stages{ display:flex; flex-direction:column; gap:7px; padding:4px 0 6px; }
.art-stage{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--subtle); }
.art-stage i{ width:14px; height:14px; border-radius:50%; border:1.5px solid var(--border-strong); flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-style:normal; }
.art-stage.run{ color:var(--body); }
.art-stage.run i{ border-color:#3b9eff; border-top-color:transparent; animation:artSpin .8s linear infinite; }
.art-stage.ok{ color:var(--body); }
.art-stage.ok i{ border-color:var(--green); color:var(--green); }
@keyframes artSpin{ to{ transform:rotate(360deg); } }
.art-shimmer{ height:10px; border-radius:5px; background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.12),rgba(255,255,255,.04)); background-size:200% 100%; animation:artSh 1.3s ease-in-out infinite; }
@keyframes artSh{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.art-fail{ padding:10px 12px; border-radius:9px; background:rgba(224,138,138,.08); border:1px solid rgba(224,138,138,.3); font-size:12.5px; color:var(--body); display:flex; flex-direction:column; gap:6px; }
.art-fail b{ color:var(--red); }
.art-fail.slim{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:6px 10px; font-size:11.5px; }
.art-spec{ position:absolute; inset:0; background:rgba(8,8,8,.97); padding:12px 14px; display:flex; flex-direction:column; gap:8px; z-index:4; border-radius:inherit; }
.art-spec-h{ display:flex; align-items:center; gap:8px; font-size:12px; flex-wrap:wrap; }
.art-spec pre{ margin:0; font-family:var(--font-mono); font-size:10.5px; line-height:1.5; color:var(--body); overflow:auto; flex:1; white-space:pre; }

/* legacy widgets strip (the five old widgets stay reachable, collapsed) */
.md-legacy{ display:flex; flex-direction:column; gap:14px; }

/* phone */
@media (max-width:700px){
  .art-grid{ grid-template-columns:minmax(0,1fr); }
  /* the whole row is the tap target: the title link stretches over its row (buttons and tags stay on top) */
  .art-row.linked, .art-ev.linked, .art-leg.linked, .art-q.linked, .art-now-row.linked{ position:relative; min-height:44px; }
  .linked a.art-link.has-src::after{ content:""; position:absolute; inset:0; }
  .linked .art-acts, .linked button, .linked .art-mini, .linked a.art-tag, .linked .art-sub a{ position:relative; z-index:1; }   /* only real controls stay above the stretched link; tags and ages are part of the row */
  .art-composer form{ flex-wrap:wrap; }
  .art-composer input{ min-height:44px; }
  .art-build{ min-height:44px; flex:1; }
  .art-sugg .art-sugg-t{ margin-left:0; }
  .art-mini{ min-height:44px; }   /* 44px touch targets */
  .gqc .art-queue .art-q{ grid-template-columns:minmax(0,1fr); gap:8px; }   /* the title gets the full width; Done · Waiting · Park sit under it */
  .gqc .art-acts{ gap:8px; }
  .gqc .art-acts button{ position:relative; min-height:32px; padding:6px 14px; font-size:12.5px; }   /* compact pills like the rest of the app… */
  .gqc .art-acts button::after{ content:""; position:absolute; inset:-6px -4px; }   /* …with the tap area still ~44px */
  /* documents on a phone: one stacked row per document — title (full width), then status + Paid / × */
  .gqc .art-tb-docs thead{ display:none; }
  .gqc .art-tb-docs tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:10px; row-gap:6px; padding:10px 0; border-bottom:1px solid var(--border); }
  .gqc .art-tb-docs tr:first-child{ padding-top:2px; }
  .gqc .art-tb-docs tr:last-child{ border-bottom:none; }
  .gqc .art-tb-docs td{ display:block; padding:0; border:none; }
  .gqc .art-tb-docs td:first-child{ grid-column:1 / -1; }
  .gqc .art-tb-docs td.art-docacts{ display:flex; gap:6px; justify-content:flex-end; }
  .gqc .art-tb-docs .art-link-t{ display:inline; -webkit-line-clamp:unset; }   /* title and its "Drive ↗" stay on one line of text */
  .art-grip{ display:none; }
  /* tables must never be wider than the phone: a wider block makes WebKit inflate its text (~2x)
     and pushes the Status / action columns off-screen. Titles wrap to three lines instead. */
  .art-tb a.art-link.has-src{ display:inline; }
  .art-tb .art-link-t{ white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .art-tb .art-sub{ white-space:normal; }
}

/* chat: the "Pin this as a card" row under an answer (gqchat.jsx) */
.gq-pinrow{ margin-top:8px; }

/* ── v4: time-horizon rows, the four words, Needs me now, trips ───────────── */
.art-rowsec{ display:flex; flex-direction:column; gap:10px; padding:4px 0 2px; border-top:1px solid var(--border); }
.art-rowsec:first-of-type{ border-top:none; padding-top:0; }
.art-rowhead{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.art-rowhead h3{ margin:0; font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); white-space:nowrap; }
.art-rowq{ font-size:11.5px; color:var(--subtle); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.art-rown{ margin-left:auto; font-size:10.5px; }
.art-rowsec.empty .art-rowhead h3{ color:var(--muted); }
.art-rowempty{ font-size:11.5px; color:var(--subtle); padding:6px 10px; border:1px dashed transparent; border-radius:9px; }
.art-rowsec.dragging .art-rowempty{ border-color:rgba(217,70,239,.35); color:var(--muted); }
.art-rowsec.over{ background:rgba(217,70,239,.04); border-radius:10px; }
.art-rowsec.over .art-rowempty{ border-color:var(--primary); color:var(--ink); }
.art-rowsec.over .art-rowhead h3{ color:var(--primary); }

/* the four words: On track / Due / At risk / Blocked — always the word, colour is secondary */
.art-st{ display:inline-flex; align-items:center; gap:4px; }
.art-state{ font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.04em; padding:2px 7px; border-radius:9999px; border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
.art-state.on_track{ color:var(--green); border-color:rgba(95,214,160,.4); background:rgba(95,214,160,.07); }
.art-state.due{ color:#e0b45f; border-color:rgba(224,180,95,.45); background:rgba(224,180,95,.08); }
.art-state.at_risk{ color:var(--red); border-color:rgba(224,138,138,.5); background:rgba(224,138,138,.09); }
.art-state.blocked{ color:var(--red); border-color:rgba(224,138,138,.7); background:rgba(224,138,138,.16); }   /* bad, not violet: violet means GQ */
.art-sumline{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.art-sumline > span:first-child{ min-width:0; }
.art-showall{ margin-left:auto; }
.art-docacts{ white-space:nowrap; }
.art-docacts .art-mini + .art-mini{ margin-left:4px; }
.art-x{ padding:2px 6px; font-size:12px; line-height:1; }
.art-x:hover{ color:var(--red); border-color:rgba(224,138,138,.5); }
.art-q .art-sub .art-st{ vertical-align:middle; }

/* Needs me now: the computed strip under the first row header */
.art-now{ display:flex; flex-direction:column; gap:2px; padding:8px 12px; border-radius:12px; border:1px solid rgba(217,70,239,.3); background:linear-gradient(90deg,rgba(217,70,239,.08),rgba(217,70,239,.015)); }
.art-now.empty{ font-size:12px; padding:9px 12px; border-style:dashed; background:none; }
.art-now-row{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; padding:5px 0; border-bottom:1px solid var(--border); }
.art-now-row:last-of-type{ border-bottom:none; }
.art-now-t{ font-size:13px; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.art-now .art-mini{ align-self:flex-start; margin-top:4px; }

/* trips: one block per trip, sub-items as legs */
.art-trips{ display:flex; flex-direction:column; gap:8px; }
.art-trip{ padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.025); border:1px solid var(--border); display:flex; flex-direction:column; gap:3px; min-width:0; }
.art-trip.blocked{ border-color:rgba(217,70,239,.45); }
.art-trip.at_risk{ border-color:rgba(224,138,138,.45); }
.art-trip.due{ border-color:rgba(224,180,95,.4); }
.art-trip-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--body); padding-bottom:3px; }
.art-trip-h b{ color:var(--ink); font-weight:600; }
.art-leg{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:center; font-size:12.5px; padding:3px 0; }
.art-leg-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--body); }
.art-trip-miss{ font-size:12px; color:var(--red); padding-top:3px; }
.art-trip-chg{ font-size:11.5px; color:#e0b45f; padding-top:2px; }

@media (max-width:700px){
  .art-rowq{ display:none; }
  .art-now-t{ white-space:normal; }
  .art-leg{ grid-template-columns:auto minmax(0,1fr); }
  .art-leg .art-age{ grid-column:2; }
}