/* Influencer tab (app/js/ui/influencer.js + app/js/ui/influencer/*). Uses the studio tokens from studio.css. */
.inf { display: grid; gap: 18px; }
.inf .btn.danger, .inf ~ dialog .btn.danger, dialog .btn.primary.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.inf .btn.ghost.danger { background: transparent; color: var(--bad); border-color: transparent; }
.inf .btn.ghost.danger:hover { background: #F6E3DF; }
.inf .initials { display: grid; place-items: center; width: 100%; height: 100%; background: #2B2925; color: #F3EEE4; font-weight: 650; letter-spacing: .04em; }

/* client list: big squares */
.inf-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.inf-client { display: grid; grid-template-rows: auto 1fr; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); text-align: left; cursor: pointer; min-width: 0; }
.inf-client:hover { border-color: #CFC7B9; box-shadow: var(--shadow); }
.inf-client .sq { aspect-ratio: 1; display: block; background: #DDD7CC; overflow: hidden; }
.inf-client .sq img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inf-client .initials { font-size: 44px; }
.inf-client .body { display: grid; gap: 4px; padding: 12px 14px 14px; align-content: start; }
.inf-client strong { font-size: 16px; }

/* client page */
.inf-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.inf-who { display: flex; align-items: center; gap: 12px; }
.inf-who img, .inf-who .initials { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; font-size: 16px; }
.inf-tabs { align-self: start; justify-self: start; max-width: 100%; overflow-x: auto; }
.inf-tabs button { white-space: nowrap; }
.inf-tabs button:disabled { opacity: .45; cursor: not-allowed; }
.inf-body { display: grid; gap: 18px; }
.inf-note { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--panel); font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inf-note.warn { background: #FBF3E2; border-color: #EBD7AA; }
.inf-restore { margin: 8px 0 12px; border-left: 3px solid var(--accent); } /* Save and resume: Restore / Discard a local draft */
.inf-restore-text { flex: 1 1 280px; min-width: 0; }
.inf-section-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.inf-section-head p { margin: 2px 0 0; }

/* story form */
.inf-form { display: grid; gap: 16px; }
.inf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.inf-consent { display: grid; gap: 6px; border-color: #D9C9A3; background: #FFFCF4; }
.inf-consent input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--accent); }
.inf-form-foot { justify-content: space-between; }

/* photos */
.inf-drop { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 34px 20px; border: 2px dashed #CFC7B9; border-radius: 14px; background: rgba(255,255,255,.6); cursor: pointer; }
.inf-drop:hover, .inf-drop.over { border-color: var(--accent); background: #FFF8F3; }
.inf-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.inf-drop.off { cursor: not-allowed; opacity: .6; }
.inf-drop-more { margin-top: -8px; }
.inf-body > p[role=status]:empty { display: none; }
/* the bulk upload list (photos.js + upload-queue.js) */
.inf-upq { display: grid; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.inf-upq-head { display: flex; gap: 12px; align-items: center; }
.inf-upq-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.inf-upq-bar > span { display: block; height: 100%; background: var(--accent); transition: width .2s ease; }
.inf-upq-full { margin: 0; padding: 8px 10px; border-radius: 8px; background: #FBF3E2; border: 1px solid #EBD7AA; font-size: 14px; }
.inf-upq-files summary { cursor: pointer; font-size: 13px; color: var(--muted); min-height: 24px; display: flex; align-items: center; }
.inf-upq-list { margin: 8px 0 0; padding: 0; list-style: none; max-height: 280px; overflow: auto; display: grid; gap: 4px; font-size: 13px; }
.inf-upq-list li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--soft); }
.inf-upq-list .nm { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inf-upq-list .why { flex-basis: 100%; color: var(--bad); }
.inf-more { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; justify-content: center; padding: 8px 0; }
@media (prefers-reduced-motion: reduce) { .inf-upq-bar > span { transition: none; } }
/* the Polaroid grid (photos.js): white frame, deep bottom strip with the description handwritten in Caveat, a small
   tilt per photo (--tilt, from its id) that straightens on hover, Edit on hover (always shown on touch screens) */
@font-face { font-family: "TBV Caveat Hand"; src: url(/fonts/lib/caveat.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
.inf-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 30px 24px; padding: 6px 6px 12px; }
.pola { margin: 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.pola-card { position: relative; background: #FFFEFA; padding: 11px 11px 0; border-radius: 2px; box-shadow: 0 1px 1px rgba(20, 19, 17, .08), 0 3px 6px rgba(20, 19, 17, .07), 0 14px 26px -12px rgba(20, 19, 17, .32); transform: rotate(var(--tilt, 0deg)); transition: transform .24s cubic-bezier(.2, .7, .3, 1), box-shadow .24s ease; }
.pola:hover .pola-card, .pola:focus-within .pola-card { transform: rotate(0deg) translateY(-3px); box-shadow: 0 2px 3px rgba(20, 19, 17, .08), 0 22px 36px -14px rgba(20, 19, 17, .38); }
.pola-photo { position: relative; aspect-ratio: 1; background: #DDD7CC; overflow: hidden; }
.pola-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pola-strip { min-height: 62px; display: flex; align-items: center; padding: 6px 4px 9px; }
.pola-hand { font: 600 21px/1.08 "TBV Caveat Hand", "Bradley Hand", cursive; color: #2B2620; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pola-hand.none { color: #9B9286; }
.pola-mark { position: absolute; left: 8px; top: 8px; padding: 4px 7px; border-radius: 3px; background: rgba(20, 19, 17, .78); color: #F3EEE4; font: 650 10.5px/1 "TBV Inter", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.pola-edit { position: absolute; right: 8px; bottom: 8px; min-height: 36px; padding: 0 16px; border-color: transparent; background: rgba(255, 254, 250, .95); box-shadow: 0 2px 10px rgba(20, 19, 17, .25); font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; }
.pola-edit:hover { background: #fff; }
.pola:hover .pola-edit, .pola-edit:focus-visible, .pola-edit[aria-busy="true"] { opacity: 1; transform: none; }
@media (hover: none) { .pola-edit { opacity: 1; transform: none; } }
.pola-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 28px; padding: 0 2px; }
.pola-meta .small-btn { margin-left: auto; min-height: 28px; padding: 0 8px; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .pola-card, .pola-edit { transition: none; } .pola:hover .pola-card, .pola:focus-within .pola-card { transform: rotate(0deg); } }

/* the photo editor (photo-editor.js), in the look of Make's video editor (studio.css .immersive, .gwrap) */
dialog.pe { width: min(1280px, calc(100vw - 32px)); }
.pe .gwrap { grid-template-columns: minmax(0, 1fr) 360px; }
.pe-box { justify-self: stretch; align-self: stretch; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.pe-view { display: block; border-radius: 3px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); background: #000; touch-action: none; }
.pe-view:focus-visible { outline: 2px solid #E8B547; outline-offset: 3px; }
.pe-bar { width: 100%; justify-content: center; }
.pe-gap { flex: 1; }
.pe-compare { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pe .btn[aria-pressed="true"] { border-color: #F3EEE4; box-shadow: inset 0 0 0 1px #F3EEE4; }
.pe-ico { display: inline-grid; place-items: center; }
.pe .btn:disabled { opacity: .4; cursor: not-allowed; }
.pe-panel { gap: 12px; }
.pe-tool { display: grid; gap: 10px; align-content: start; }
.pe-hint { margin: 0; opacity: .72; }
.pe-name { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-label { margin: 6px 0 0; }
.pe .seg { background: #1E1C1A; border-color: #3A3632; }
.pe .seg button { color: #F3EEE4; }
.pe .seg button[aria-pressed="true"] { background: #F3EEE4; color: #121110; }
.pe-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pe-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pe-grid2 .btn { justify-content: flex-start; white-space: normal; text-align: left; line-height: 1.2; min-height: 44px; }
.pe-foot { margin-top: auto; justify-content: space-between; padding-top: 8px; }
.pe-switch { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; cursor: pointer; }
.pe-switch input { width: 24px; height: 24px; margin: 0; accent-color: #E8B547; }
.pe-switch > span { display: grid; gap: 2px; }
.pe-gbar { height: 18px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.pe-stop { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #3A3632; cursor: pointer; padding: 0; }
.pe-stop[aria-pressed="true"] { border-color: #F3EEE4; box-shadow: 0 0 0 2px #121110, 0 0 0 4px #F3EEE4; }
.pe-stop:focus-visible, .pe-look:focus-visible, .pe-choice:focus-within { outline: 2px solid #E8B547; outline-offset: 2px; }
.pe .wheelbox { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
.pe .wheelbox > .stack { width: 100%; grid-template-columns: 1fr 120px; align-items: end; }
.pe .wheel { width: 200px; height: 200px; }
.pe label.field, .pe label.field > span { color: #F3EEE4; }
.pe input[type=text] { background: #1E1C1A; border-color: #3A3632; color: #F3EEE4; }
.pe input[type=range] { accent-color: #E8B547; }
.pe-looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pe-look { display: grid; gap: 6px; padding: 6px; border: 1px solid #3A3632; border-radius: 8px; background: #1E1C1A; color: #F3EEE4; cursor: pointer; text-align: left; font-size: 13px; }
.pe-look[aria-pressed="true"] { border-color: #F3EEE4; box-shadow: inset 0 0 0 1px #F3EEE4; }
.pe-look-img { width: 100%; height: 96px; object-fit: cover; border-radius: 4px; display: block; }
dialog.pe-sheet { background: #1A1816; color: #F3EEE4; border: 1px solid #3A3632; width: min(460px, calc(100vw - 32px)); }
dialog.pe-sheet::backdrop { background: rgba(8, 7, 6, .55); }
.pe-sheet h3 { color: #fff; }
.pe-sheet .btn { background: #1E1C1A; border-color: #3A3632; color: #F3EEE4; }
.pe-sheet .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pe-sheet .muted { color: #A8A096; }
.pe-choice { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 12px; border: 1px solid #3A3632; border-radius: 10px; cursor: pointer; }
.pe-choice:has(input:checked) { border-color: #F3EEE4; background: #23201D; }
.pe-choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #E8B547; }
.pe-choice > span { display: grid; gap: 3px; }
.pe-sheet .err { color: #FF9C8A; }

/* job card */
.inf-job { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.inf-job[data-tone="warn"] { background: #FBF3E2; border-color: #EBD7AA; }
.inf-job[data-tone="bad"] { background: #F8E6E2; border-color: #E5BDB4; }
.inf-job[data-tone="ok"] { background: #E6F0E9; border-color: #BCD6C4; }
.inf-job .btn { justify-self: start; }

/* new carousel */
.inf-step { display: grid; gap: 10px; }
.inf-step > .btn.big { max-width: 360px; }
.inf-formats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.inf-format { display: grid; gap: 6px; align-content: start; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; min-height: 132px; }
.inf-format:hover { border-color: #CFC7B9; }
.inf-format[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.inf-pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.inf-pins.big { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.inf-pin { position: relative; aspect-ratio: 1; padding: 0; border: 3px solid transparent; border-radius: 10px; overflow: hidden; background: #DDD7CC; cursor: pointer; }
.inf-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inf-pin[aria-pressed="true"] { border-color: var(--accent); }
.inf-pin .badge { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.62); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 5px; text-transform: capitalize; }
.inf-pin:focus-visible, .inf-format:focus-visible, .inf-client:focus-visible, .inf-car:focus-visible, .inf-swatch:focus-visible, .inf-thumb button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* carousels list */
.inf-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.inf-car { display: grid; grid-template-rows: auto 1fr; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); text-align: left; cursor: pointer; }
.inf-car canvas { width: 100%; height: auto; display: block; background: #DDD7CC; }
.inf-car .body { display: grid; gap: 4px; padding: 10px 12px 12px; align-content: start; }
.inf-failed summary { cursor: pointer; }

/* editor */
.inf-ed-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; top: 60px; z-index: 5; background: rgba(246, 243, 237, .94); padding: 8px 0; }
.inf-editor { display: grid; grid-template-columns: 132px minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.inf-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: calc(100vh - 160px); overflow: auto; }
.inf-thumb button { position: relative; width: 100%; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #DDD7CC; cursor: grab; display: block; }
.inf-thumb canvas { width: 100%; height: auto; display: block; }
.inf-thumb[aria-current="true"] button { border-color: var(--accent); }
.inf-thumb.over button { border-color: var(--ink); border-style: dashed; }
.inf-thumb .n { position: absolute; left: 4px; top: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 0 6px; border-radius: 5px; }
.inf-stagewrap { position: sticky; top: 118px; display: grid; gap: 10px; justify-items: center; }
.inf-stagewrap .frame { width: min(100%, 460px); }
.inf-stage { width: 100%; height: auto; display: block; border-radius: 6px; }
.inf-panel { display: grid; gap: 18px; }
.inf-panel section { display: grid; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.inf-layouts { flex-wrap: wrap; }
.inf-layouts button { padding: 0 10px; font-size: 13px; }
.inf-photo-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inf-photo-row img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.inf-hooks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.inf-hooks li { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 14px; }
.inf-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.inf-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.inf-flags ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inf-flags input[type=checkbox], .inf-panel input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }

@media (max-width: 1180px) {
  .inf-editor { grid-template-columns: 112px minmax(0, 1fr); }
  .inf-panel { grid-column: 1 / -1; }
  .inf-stagewrap { position: static; }
}
@media (max-width: 760px) {
  .inf-cols { grid-template-columns: minmax(0, 1fr); }
  .inf-clients, .inf-photos, .inf-cars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .inf-photos { gap: 22px 14px; padding: 4px 2px 10px; }
  .pola-card { padding: 7px 7px 0; }
  .pola-strip { min-height: 46px; padding: 4px 2px 6px; }
  .pola-hand { font-size: 17px; }
  .pola-edit { min-height: 32px; padding: 0 12px; right: 6px; bottom: 6px; }
  .pola-meta .pill { font-size: 11px; }
  dialog.pe { width: 100vw; height: 100dvh; }
  /* the photo keeps a fixed share of the screen and the tools scroll under it (a minmax(0, ..) row collapses to
     nothing once the long panel leaves no free space) */
  .pe .gwrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: 46vh minmax(0, 1fr); overflow: hidden; }
  .pe .gpanel { overflow: auto; border-left: 0; border-top: 1px solid #2A2724; }
  .pe-txt { display: none; }
  .pe-bar .btn { min-width: 44px; justify-content: center; }
  .pe-stage { padding: 12px; gap: 10px; }
  .pe-bar .btn { padding: 0 10px; }
  .inf-formats { grid-template-columns: minmax(0, 1fr); }
  .inf-editor { grid-template-columns: minmax(0, 1fr); }
  .inf-strip { grid-auto-flow: column; grid-auto-columns: 84px; max-height: none; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .inf-strip > li { scroll-snap-align: start; }
  .inf-ed-head { position: static; }
  .inf-client .initials { font-size: 30px; }
}

/* dictation (app/js/ui/dictate.js): a mic inside the field, a listening bar under it */
.dict { position: relative; display: block; }
.dict > input, .dict > textarea { width: 100%; padding-right: 46px; }
.dict-mic { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; min-width: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.dict.area .dict-mic { top: auto; bottom: 8px; transform: none; }
.dict-mic:hover { color: var(--ink); border-color: #CFC7B9; }
.dict-mic:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dict.on .dict-mic { background: var(--bad); border-color: var(--bad); color: #fff; animation: dict-pulse 1.4s ease-in-out infinite; }
.dict.on > input, .dict.on > textarea { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
@keyframes dict-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(161, 42, 26, .45); } 50% { box-shadow: 0 0 0 6px rgba(161, 42, 26, 0); } }
@media (prefers-reduced-motion: reduce) { .dict.on .dict-mic { animation: none; } }
.dict-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: #F8E6E2; color: var(--ink); font-size: 13px; }
.dict-state { font-weight: 600; color: var(--bad); }
.dict-interim { color: var(--muted); flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.dict-lang { width: auto; min-height: 30px; padding: 2px 6px; font-size: 13px; }
.dict-stop { min-height: 30px; }
.dict-note { flex-basis: 100%; font-size: 12px; color: var(--muted); }

/* trend radar (app/js/ui/radar.js), mountable on any tab */
.radar { display: grid; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.radar-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.radar-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.radar-item { display: grid; gap: 6px; align-content: start; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #FBFAF7; }
.radar-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.radar-title { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.radar-item .btn { justify-self: start; }
.radar-earlier summary { cursor: pointer; color: var(--muted); }
.radar-earlier .radar-list { margin-top: 10px; }
@media (max-width: 760px) { .radar-list { grid-template-columns: minmax(0, 1fr); } }

/* ideas (app/js/ui/influencer/ideas.js) */
.inf-idea-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.inf-idea-set { display: grid; gap: 10px; }
.inf-ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.inf-idea { display: grid; gap: 8px; align-content: start; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.inf-idea .btn { justify-self: start; }
.inf-idea ol { margin: 0; padding-left: 20px; display: grid; gap: 2px; }
.inf-idea-hook { margin: 0; font-family: "TBV Fraunces", Georgia, serif; font-size: 17px; line-height: 1.35; }
.inf-idea-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.inf-idea-photos { display: flex; gap: 6px; flex-wrap: wrap; }
.inf-idea-photos img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
@media (max-width: 760px) { .inf-ideas, .inf-idea-ask { grid-template-columns: minmax(0, 1fr); } }
/* Ideas v2 (writer v2, 2026-10-09): batches appended, a card grid, planned stills, More ideas at the end */
.inf-idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; align-items: start; }
.inf-idea-more { display: flex; justify-content: center; padding: 6px 0 18px; }
.inf-idea-more .btn, .inf-idea .row .btn { min-height: 40px; }
.inf-idea-photos.still a { display: block; border-radius: 8px; }
.inf-idea-photos.still img { width: 48px; height: 60px; }
/* Photo requests (writer v2): "Photos that would make this stronger", on idea cards and above the carousel editor */
.inf-req { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.inf-req.idea { background: transparent; padding: 8px 10px; }
.inf-req > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inf-req-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.inf-req-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.inf-req-item.done .inf-req-shot { text-decoration: line-through; color: var(--muted); }
.inf-req-tick { display: grid; place-items: center; min-width: 32px; min-height: 32px; cursor: pointer; }
.inf-req-tick input { width: 20px; height: 20px; margin: 0; }
.inf-req-text { display: grid; gap: 2px; min-width: 0; overflow-wrap: break-word; }
.inf-req-shot { font-size: 14px; line-height: 1.35; }
.inf-req-do { display: flex; align-items: center; gap: 8px; }
.inf-req-do .btn { min-height: 36px; white-space: nowrap; }
.inf-req-thumb { width: 36px; height: 45px; object-fit: cover; border-radius: 6px; }
/* narrow places (an idea card, a phone): the tick and the words on one row, the photo and the button under the words */
.inf-req.idea .inf-req-item { grid-template-columns: auto minmax(0, 1fr); }
.inf-req.idea .inf-req-do { grid-column: 2; }
@media (max-width: 560px) { .inf-req-item { grid-template-columns: auto minmax(0, 1fr); } .inf-req-do { grid-column: 2; } }
.inf-learned { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; }
.inf-learned > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.inf-learned ul { margin: 6px 0 4px; padding-left: 18px; display: grid; gap: 4px; }

/* Growth guide (a creator's Growth tab, app/js/ui/influencer/growth.js): four calm parts, details behind one tap */
.gr { display: grid; gap: 12px; margin-top: 12px; max-width: 960px; }
.gr-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-top: 12px; max-width: 960px; }
.gr-settings > label { min-width: 0; }
.gr-settings .field-select { width: 100%; min-width: 0; max-width: 100%; }
.gr-part { display: grid; gap: 10px; min-width: 0; }
.gr-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.gr-head h4 { margin: 0; font-size: 15px; font-weight: 650; }
.gr .btn.small { min-height: 28px; padding: 0 10px; font-size: 13px; }
.gr-scroll { overflow-x: auto; max-width: 100%; }
.gr-week { border-collapse: collapse; width: 100%; min-width: 300px; font-size: 13px; table-layout: fixed; }
.gr-week th, .gr-week td { padding: 6px 2px; text-align: center; border-top: 1px solid var(--line); }
.gr-week thead th { border-top: 0; color: var(--muted); font-weight: 600; font-size: 12px; }
.gr-week tbody th { text-align: left; font-weight: 600; width: 92px; padding-right: 6px; white-space: nowrap; }
.gr-dot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; color: var(--on-accent); }
.gr-reel { background: var(--accent); } .gr-carousel { background: var(--ok); } .gr-image { background: var(--warn); } .gr-story { background: var(--panel); border: 2px solid var(--muted); width: 14px; height: 14px; }
.gr-times, .gr-tips, .gr-today { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.gr-times li, .gr-tips li { font-size: 14px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.gr-tips li, .gr-times li { flex-wrap: nowrap; }
.gr-tips li > span:last-child, .gr-times li > span:last-child, .gr-active > span:last-child { min-width: 0; }
.gr-grade { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 4px; border-radius: 6px; font-size: 11.5px; font-weight: 700; cursor: help; }
.gr-grade.gA { background: #DFEDE4; color: #234A36; } .gr-grade.gB { background: #E6EAF2; color: #2B3B5C; } .gr-grade.gC { background: var(--soft); color: var(--muted); }
.gr-today li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 8px; }
.gr-today li:first-child { border-top: 0; padding-top: 0; }
.gr-check { display: flex; gap: 10px; align-items: center; font-size: 14px; min-height: 28px; cursor: pointer; flex: 1 1 200px; }
.gr-check input { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); flex: none; }
.gr-check input:checked + span { color: var(--muted); text-decoration: line-through; }
.gr-why summary { cursor: pointer; color: var(--muted); min-height: 24px; display: inline-flex; align-items: center; }
.gr-why ul { margin: 6px 0 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.gr-why li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; overflow-wrap: anywhere; }
.gr-why li a { display: inline-block; min-height: 24px; line-height: 24px; }
@media (max-width: 480px) { .gr-week tbody th { width: 74px; font-size: 12px; } .gr-week { font-size: 12px; } }
.gr-active { display: flex; gap: 8px; align-items: baseline; }
/* Growth > Scan my account (2026-10-12): the handles and Scan, then the account's own guide */
.gr-scan { display: grid; gap: 10px; margin-top: 12px; max-width: 960px; }
.gr-scan-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px 12px; align-items: end; }
.gr-scan-fields > label { min-width: 0; }
.gr-scan-go .btn { width: 100%; min-height: 38px; }
.gr-err { color: var(--bad); margin: 0; min-height: 0; }
.gr-err:empty { display: none; }
.gr-status { margin: 0; color: var(--muted); }
.gr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 8px; }
.gr-tile { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.gr-tile strong { font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.gr-mix, .gr-list, .gr-others { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.gr-mix { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.gr-mix li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.gr-mix .gr-dot { width: 12px; height: 12px; }
.gr-list li { font-size: 14px; line-height: 1.45; }
.gr-best, .gr-warn { margin: 0; overflow-wrap: anywhere; }
.gr-warn { color: var(--warn); }
.gr-best a, .gr-part a, .gr-card a { display: inline-block; min-height: 24px; line-height: 24px; }
.gr-early { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--soft); color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 20px; }
.gr-ai { display: grid; gap: 4px; border-left: 3px solid var(--line); padding-left: 10px; }
.gr-gap { border-left: 3px solid var(--warn); padding-left: 10px; }
.gr-ideas { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.gr-idea { display: grid; gap: 6px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; overflow-wrap: anywhere; }
.gr-idea-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.gr-idea-head strong { font-size: 15px; }
.gr-fmt { flex: none; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 700; line-height: 20px; color: var(--on-accent); }
.gr-fmt.gr-image { color: var(--on-accent); }
.gr-hook { margin: 0; font-style: normal; }
.gr-beats { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.gr-today-why { display: block; margin-top: 2px; }
.gr-research > summary { cursor: pointer; min-height: 28px; display: flex; align-items: center; font-weight: 650; font-size: 15px; }
.gr-scan-go .btn:disabled { opacity: .5; cursor: not-allowed; }
.gr-times li > strong { flex: none; white-space: nowrap; }
.gr-progress { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.gr-progress-fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .4s linear; }
.gr-progress[hidden], .gr-progress-label[hidden] { display: none; }
.gr-progress-label { margin: -4px 0 0; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .gr-progress-fill { transition: none; } }
/* Growth deep intel (2026-10-12): the summary, then closed cards with their finding in one line */
.gr-detail-head { display: grid; gap: 2px; margin-top: 8px; }
.gr-detail-head h4 { margin: 0; font-size: 15px; font-weight: 650; }
.gr-card { padding: 0; min-width: 0; }
.gr-card > summary { list-style: none; cursor: pointer; display: grid; gap: 4px; padding: 14px 16px; min-height: 44px; }
.gr-card > summary::-webkit-details-marker { display: none; }
.gr-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gr-card-top strong { font-size: 15px; font-weight: 650; }
.gr-card-more { color: var(--accent); white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
.gr-card .gr-more-close, .gr-card[open] .gr-more-open { display: none; }
.gr-card[open] .gr-more-close { display: inline; }
.gr-card-line { color: var(--muted); overflow-wrap: anywhere; }
.gr-card-body { display: grid; gap: 12px; padding: 0 16px 16px; min-width: 0; }
.gr-bars-wrap { display: grid; gap: 4px; min-width: 0; }
.gr-bars-label { margin: 0; }
.gr-bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.gr-bars li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(60px, 1fr) 12.5rem; gap: 10px; align-items: center; font-size: 13px; }
.gr-bar-name { min-width: 0; overflow-wrap: anywhere; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.gr-bar { position: relative; height: 10px; border-radius: 99px; background: var(--soft); }
.gr-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.gr-bar i.up { background: var(--accent); } .gr-bar i.down { background: color-mix(in srgb, var(--muted) 55%, var(--panel)); }
.gr-bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .55; }
.gr-bar-val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gr-card .gr-part.panel { border: 0; padding: 0; background: none; box-shadow: none; } /* When to post inside its card */
.gr-tag { font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 5px; line-height: 18px; }
.gr-tag.up { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--accent); } .gr-tag.down { background: var(--soft); color: var(--muted); }
.gr-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px 20px; min-width: 0; }
.gr-lines, .gr-posts { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.gr-lines li, .gr-post { overflow-wrap: anywhere; }
.gr-x { display: inline-block; min-width: 3.4em; font-weight: 700; font-variant-numeric: tabular-nums; }
.gr-opps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: opp; }
.gr-opps li { counter-increment: opp; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; border-top: 1px solid var(--line); padding-top: 10px; }
.gr-opps li:first-child { border-top: 0; padding-top: 0; }
.gr-opps li::before { content: counter(opp); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--soft); font-size: 12px; font-weight: 700; }
.gr-opp-text { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .gr-opps li { grid-template-columns: 26px minmax(0, 1fr); } .gr-opps li > .btn { grid-column: 2; justify-self: start; } .gr-bars li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; } .gr-bars li .gr-bar { grid-column: 1 / -1; grid-row: 2; } }
.gr-heat { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 300px; font-size: 12px; table-layout: fixed; }
.gr-heat th { color: var(--muted); font-weight: 600; font-size: 11.5px; }
.gr-heat tbody th { text-align: left; width: 46px; white-space: nowrap; }
.gr-heat td { height: 30px; text-align: center; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.gr-heat td.few { color: var(--muted); } .gr-heat td.none { border-style: dashed; } .gr-heat td.on, .gr-heat td.hot { border-color: transparent; font-weight: 700; }
.gr-heat td.hot { color: var(--on-accent); }
.gr-table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 320px; }
.gr-table th, .gr-table td { padding: 6px 8px; text-align: left; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.gr-table thead th { border-top: 0; color: var(--muted); font-weight: 600; font-size: 12px; }
.gr-table tbody th { font-weight: 600; white-space: nowrap; }
.gr-bench { min-width: 520px; } .gr-bench tr.own { background: var(--soft); }
.gr-mixbar { display: flex; width: 90px; height: 10px; border-radius: 99px; overflow: hidden; background: var(--soft); }
.gr-mixbar i { display: block; height: 100%; }
.gr-traits { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.gr-trait { font-size: 11.5px; line-height: 20px; padding: 0 7px; border-radius: 6px; background: var(--soft); color: var(--muted); }
.gr-trait.up { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); color: var(--ink); }
.gr-deep { margin: 0; line-height: 1.55; max-width: 68ch; }
.gr-deep-card[open] .gr-card-line { display: none; }
.gr-steer { border-top: 1px solid var(--line); padding-top: 10px; align-items: flex-start; }
/* Rewrite from what works (2026-10-12): options side by side, Keep, one Undo */
.rw-body { display: grid; gap: 12px; }
.rw-basis { border-left: 3px solid var(--accent); padding-left: 10px; overflow-wrap: anywhere; }
.rw-box { display: grid; gap: 10px; min-width: 0; }
.rw-opts { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.rw-opt { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; overflow-wrap: anywhere; }
.rw-opt > .btn { justify-self: start; min-height: 32px; }
.rw-slides { display: grid; gap: 6px; }
.rw-because { color: var(--muted); border-top: 1px solid var(--line); padding-top: 6px; }
.rw-foot:empty { display: none; }
.rw-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }