/* Social — the drafting screen.

   Most colours here are existing theme-aware custom properties
   (--charcoal-soft, --concrete, --glass-border, --glass-white, --bone, --muted,
   --sand all redefine themselves under body.light-theme in index.html's inline
   stylesheet), so those rules need no counterpart.

   The convention for flat accents holds for FILLS and BORDERS only, not for
   text: raw --amber reads about 2:1 on a light card and #E05A4A about 3.2:1,
   both under AA. Every flat accent used as text below therefore carries a
   body.light-theme counterpart, reusing the pair established everywhere else in
   this codebase — #9C5C08 for amber, #B03A2E for red. */

.soc-wrap { padding: 0 1.5rem 2rem; }

/* The standing disclaimer. It is the first thing on the screen because the
   single most important fact about this module is what it does not do. */
.soc-note {
  font-size: .78rem; line-height: 1.6; color: var(--muted);
  background: var(--glass-white); border-left: 2px solid var(--glass-border);
  border-radius: 0 8px 8px 0; padding: .7rem 1rem; margin-bottom: 1.1rem;
}
.soc-note strong { color: var(--bone); font-weight: 600; }

/* ---------- The generate panel ---------- */

.soc-panel {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem;
  background: var(--charcoal-soft); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: .9rem 1rem; margin-bottom: 1rem;
}

.soc-field { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 200px; min-width: 0; }
.soc-field-narrow { flex: 0 0 90px; }
.soc-field-wide { flex: 2 1 260px; }

.soc-label {
  font-size: .62rem; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}

.soc-select, .soc-input {
  width: 100%; box-sizing: border-box;
  background: var(--concrete, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border); border-radius: 8px;
  color: var(--bone);
  font-family: 'Archivo', sans-serif; font-size: .82rem;
  padding: .45rem .6rem;
}
.soc-select:focus, .soc-input:focus { outline: none; border-color: var(--amber); }
.soc-select-small { font-size: .74rem; padding: .3rem .5rem; width: auto; }

/* The app's primary button: amber fill, dark text, in both themes — a fill, so
   no light-theme counterpart (see the file header). */
.soc-generate {
  background: var(--amber); color: #1A1410; border: 0; border-radius: 8px;
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .82rem;
  padding: .5rem 1.1rem; cursor: pointer; flex: 0 0 auto;
}
.soc-generate:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Status line ---------- */

.soc-status { font-size: .8rem; line-height: 1.55; min-height: 1.2rem; margin-bottom: 1rem; }
.soc-status-done { color: var(--muted); }

/* --teal-bright reads well on charcoal but only ~2.6:1 on white, so light
   theme drops to the deeper --teal. Same pair as .lnk-status-working. */
.soc-status-working { color: var(--teal-bright); }
body.light-theme .soc-status-working { color: var(--teal); }

.soc-status-error { color: #E05A4A; }
body.light-theme .soc-status-error { color: #B03A2E; }

/* ---------- "Nothing was written, on purpose" ---------- */

/* Deliberately not styled as an error. There being nothing booked is a true
   statement about the business, and dressing it in red would train the owner to
   read a correct refusal as a fault. */
.soc-nothing {
  background: var(--glass-white); border: 1px dashed var(--glass-border);
  border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1.2rem;
}
.soc-nothing-title {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: .95rem;
  color: var(--bone); margin-bottom: .35rem;
}
.soc-nothing-body { font-size: .8rem; line-height: 1.6; color: var(--muted); }

/* ---------- Partial-read warnings ---------- */

.soc-warnings {
  border: 1px solid rgba(232,162,61,0.45); background: rgba(232,162,61,0.08);
  border-radius: 10px; padding: .75rem .95rem; margin-bottom: 1rem;
}
.soc-warnings-title {
  font-size: .64rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
  color: var(--amber); margin-bottom: .4rem;
}
body.light-theme .soc-warnings-title { color: #9C5C08; }
.soc-warning { font-size: .76rem; line-height: 1.55; color: var(--sand); margin-top: .25rem; }

/* ---------- Results ---------- */

.soc-results-head {
  font-size: .64rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
  color: var(--muted); margin: 0 0 .6rem;
}

.soc-card {
  background: var(--charcoal-soft); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: .95rem 1.05rem; margin-bottom: .7rem;
}

/* A draft that has been kept recedes rather than disappearing — it is still
   on screen so the copy button stays where the hand left it. */
.soc-card-saved { opacity: .62; }

.soc-card-title {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: .98rem;
  color: var(--bone); margin-bottom: .45rem;
}

.soc-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .55rem; }

.soc-tag {
  font-size: .58rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
  padding: .12rem .5rem; border-radius: 999px;
  border: 1px solid var(--glass-border); color: var(--muted);
}

/* Platform tints. Borders and backgrounds are flat in both themes; the text
   colours are not, so each carries its counterpart. */
.soc-plat-instagram {
  color: var(--amber); border-color: rgba(232,162,61,0.45); background: rgba(232,162,61,0.10);
}
body.light-theme .soc-plat-instagram { color: #9C5C08; }

.soc-plat-tiktok {
  color: var(--teal-bright); border-color: rgba(31,163,158,0.45); background: rgba(31,163,158,0.10);
}
body.light-theme .soc-plat-tiktok { color: var(--teal); }

.soc-plat-facebook { color: var(--sand); }

.soc-tag-status { border-style: dashed; }
.soc-tag-approved { color: #22C55E; border-color: rgba(34,197,94,0.45); }
body.light-theme .soc-tag-approved { color: #15803D; }
.soc-tag-posted { color: var(--sand); }

/* ---------- The money flag ---------- */

/* The loudest thing on the screen, and above the text rather than under it: a
   price the model invented is the one error that reaches a customer standing at
   the cart, so it has to be read before the caption is. */
.soc-flag {
  font-size: .76rem; line-height: 1.55; color: #E05A4A;
  border: 1px solid rgba(224,90,74,0.5); background: rgba(224,90,74,0.10);
  border-radius: 8px; padding: .5rem .7rem; margin-bottom: .6rem;
}
body.light-theme .soc-flag { color: #B03A2E; }
.soc-flag strong { font-weight: 700; }

/* ---------- The text itself ---------- */

/* pre-wrap, because the model writes paragraph breaks. Collapsing them would
   turn a caption into one block. Carousels no longer render through here — they
   have their own slide layout below — except when a saved one has no structure
   left to read, and then this is what shows the text it does have. */
.soc-body {
  font-size: .86rem; line-height: 1.65; color: var(--bone);
  white-space: pre-wrap; word-break: break-word;
}

.soc-sub {
  font-size: .6rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
  color: var(--muted); margin: .8rem 0 .3rem;
}

/* ---------- Carousels ---------- */

/* A carousel is an ordered set of slides and has to LOOK like one. The old
   rendering was .soc-body with newlines in it, which is a wall of text with
   numbers in it — you cannot find slide 3 in it without counting. Each slide is
   its own block, numbered on the left, with the words it carries and the
   direction for whoever draws it. */

.soc-carousel { margin-top: .2rem; }

.soc-carousel-head {
  font-size: .68rem; line-height: 1.5; color: var(--muted); margin-bottom: .55rem;
}

.soc-slide {
  display: flex; align-items: flex-start; gap: .7rem;
  border: 1px solid var(--glass-border); border-radius: 9px;
  background: var(--glass-white);
  padding: .6rem .7rem; margin-bottom: .4rem;
}

/* The number is the point of the whole layout: he asked for slide 3, this is
   how he finds slide 3. An amber fill with dark text — a fill, so it holds in
   both themes without a counterpart. */
.soc-slide-n {
  flex: 0 0 1.55rem; height: 1.55rem; border-radius: 999px;
  background: var(--amber); color: #1A1410;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .74rem;
  display: flex; align-items: center; justify-content: center;
}

.soc-slide-main { flex: 1 1 auto; min-width: 0; }

/* Fraunces, because this is display copy — it is the text that will be set
   large on the slide itself, and setting it in body type here hides that a
   headline is three lines long. */
.soc-slide-headline {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: .95rem; line-height: 1.35;
  color: var(--bone); word-break: break-word;
}

.soc-slide-support {
  font-size: .8rem; line-height: 1.55; color: var(--sand);
  margin-top: .25rem; word-break: break-word;
}

.soc-slide-image {
  font-size: .74rem; line-height: 1.5; color: var(--muted);
  margin-top: .4rem; word-break: break-word;
}

.soc-slide-image-label {
  font-size: .56rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
  color: var(--muted); border: 1px solid var(--glass-border); border-radius: 4px;
  padding: .05rem .3rem; margin-right: .4rem;
}

/* Said, not hidden: a slide with no direction on it is a slide the designer
   has to guess at, and an absent line reads as "nothing needed here". */
.soc-slide-image-missing { font-style: italic; opacity: .8; }

.soc-slide-copy {
  flex: 0 0 auto;
  background: transparent; border: 1px solid var(--glass-border); border-radius: 7px;
  color: var(--muted);
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .68rem;
  padding: .25rem .55rem; cursor: pointer;
}
.soc-slide-copy:hover { border-color: var(--amber); color: var(--bone); }

/* The money flag, narrowed to the slide carrying it. The card-level flag above
   says which figure; this says which slide, because on a carousel that is the
   thing you have to find. */
.soc-slide-flagged { border-color: rgba(224,90,74,0.5); background: rgba(224,90,74,0.08); }
.soc-slide-flag { font-size: .7rem; line-height: 1.45; color: #E05A4A; margin-top: .35rem; }
body.light-theme .soc-slide-flag { color: #B03A2E; }

/* Slides too long to work as slides. Reported, never trimmed. */
.soc-slide-notes {
  font-size: .72rem; line-height: 1.55; color: var(--sand);
  border-left: 2px solid rgba(232,162,61,0.45); padding: .1rem 0 .1rem .6rem; margin: .5rem 0 .2rem;
}

.soc-caption-block { margin-top: .8rem; }

/* When there is no structure to show, or none left after an edit. */
.soc-slides-none {
  font-size: .72rem; line-height: 1.55; color: var(--muted);
  margin-top: .5rem;
}
.soc-slides-none strong { color: var(--bone); font-weight: 600; }

/* ---------- Drafts that came back unusable ---------- */

/* Not an error — the rest of the set is fine — and not silence either. */
.soc-dropped {
  border: 1px dashed rgba(232,162,61,0.45); border-radius: 10px;
  padding: .7rem .9rem; margin-bottom: 1rem;
}
.soc-dropped-title {
  font-size: .64rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
  color: var(--amber); margin-bottom: .35rem;
}
body.light-theme .soc-dropped-title { color: #9C5C08; }
.soc-dropped-item { font-size: .75rem; line-height: 1.55; color: var(--sand); margin-top: .2rem; }

.soc-hooks { margin: 0; padding-left: 1.1rem; }
.soc-hooks li { font-size: .8rem; line-height: 1.55; color: var(--sand); margin-bottom: .2rem; }

.soc-hashtags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .7rem; }
.soc-hashtag { font-size: .72rem; color: var(--muted); }

/* Provenance. Quiet on purpose — it is there to be checked, not to be read
   every time. */
.soc-grounded {
  font-size: .7rem; line-height: 1.5; color: var(--muted);
  margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--glass-border);
}

.soc-meta { font-size: .72rem; color: var(--muted); margin-bottom: .5rem; }

/* ---------- Editing ---------- */

.soc-edit {
  width: 100%; box-sizing: border-box;
  background: var(--concrete, rgba(255,255,255,0.04));
  border: 1px solid var(--amber); border-radius: 8px;
  color: var(--bone);
  font-family: 'Archivo', sans-serif; font-size: .86rem; line-height: 1.6;
  padding: .6rem .7rem; resize: vertical;
}
.soc-edit:focus { outline: none; }

/* ---------- Actions ---------- */

.soc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .85rem; }

/* Copy is the primary action on this screen because copy IS the publish path,
   so it gets the amber fill the app reserves for the thing you came to do. */
.soc-copy {
  background: var(--amber); color: #1A1410; border: 0; border-radius: 8px;
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .76rem;
  padding: .4rem .85rem; cursor: pointer;
}
.soc-copy:disabled { opacity: .45; cursor: not-allowed; }

.soc-save, .soc-edit-btn, .soc-discard {
  background: transparent; border: 1px solid var(--glass-border); border-radius: 8px;
  color: var(--muted);
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .76rem;
  padding: .4rem .85rem; cursor: pointer;
}
.soc-save:hover, .soc-edit-btn:hover { border-color: var(--amber); color: var(--bone); }
.soc-discard:hover { border-color: #E05A4A; color: var(--bone); }
.soc-save:disabled, .soc-edit-btn:disabled, .soc-discard:disabled { opacity: .45; cursor: not-allowed; }

.soc-saved-mark { font-size: .72rem; color: var(--muted); }

.soc-status-pick { display: inline-flex; align-items: center; margin-right: .2rem; }

/* Visually hidden but read aloud — the status dropdown has no visible label
   because the pill above it already names the status. */
.soc-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- The publish line ---------- */

/* On every card, every time. There is no publish integration, and a screen full
   of finished-looking posts is exactly where somebody assumes there is one. */
.soc-publish-note {
  font-size: .68rem; line-height: 1.5; color: var(--muted);
  margin-top: .7rem; padding-top: .5rem; border-top: 1px dashed var(--glass-border);
}

/* ---------- Saved list ---------- */

.soc-saved-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .6rem; margin: 1.8rem 0 .8rem;
}

.soc-saved-title {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; color: var(--bone);
}

.soc-filters { display: flex; flex-wrap: wrap; gap: .4rem; }

/* A left edge that says where a row is up to without another pill. */
.soc-card-row { border-left: 3px solid var(--glass-border); }
.soc-st-approved { border-left-color: #22C55E; }
.soc-st-posted { border-left-color: var(--sand); }
.soc-st-drafted { border-left-color: var(--amber); }

/* ------------------------------------------------------------------------ */
/* Photos                                                                   */
/* ------------------------------------------------------------------------ */

/* His own photographs, out of Google Drive. Nothing here is generated, and the
   styling assumes that: these are real pictures shot dark and amber-lit, so the
   tiles are quiet and let the photo carry the colour.

   Flat accents follow the file header's convention — fills and borders need no
   light-theme counterpart, text does (#9C5C08 for amber, #B03A2E for red). */

.soc-photo-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 .6rem;
}
.soc-photo-title {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; color: var(--bone);
}
.soc-photo-count { font-size: .74rem; color: var(--muted); flex: 1 1 auto; }

/* ---------- Not set up yet ----------
   Deliberately not styled as an error. An environment variable that has never
   been set is a task, and dressing it in red trains the reader to see a correct
   instruction as a fault. */
.soc-photo-setup {
  border: 1px dashed rgba(232,162,61,0.45); border-radius: 10px;
  padding: .85rem 1rem; margin-bottom: 1.1rem;
}
.soc-photo-setup-title {
  font-size: .64rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
  color: var(--amber); margin-bottom: .4rem;
}
body.light-theme .soc-photo-setup-title { color: #9C5C08; }
.soc-photo-setup-body { font-size: .78rem; line-height: 1.6; color: var(--sand); }
.soc-photo-steps {
  margin: .6rem 0 .4rem; padding-left: 1.1rem;
  font-size: .78rem; line-height: 1.6; color: var(--sand);
}
.soc-photo-steps li { margin-bottom: .25rem; }
.soc-photo-setup-foot { font-size: .72rem; line-height: 1.55; color: var(--muted); }

/* Drive refused, or Google would not sign us in. Its own words, and this one IS
   a fault. */
.soc-photo-problem {
  font-size: .78rem; line-height: 1.6; color: #E05A4A; margin-bottom: .8rem;
}
body.light-theme .soc-photo-problem { color: #B03A2E; }

/* Reachable and empty. A true statement about his Drive, in the same register as
   "nothing was written, on purpose". */
.soc-photo-empty { font-size: .78rem; line-height: 1.6; color: var(--sand); margin: .5rem 0 .8rem; }
.soc-photo-note { font-size: .74rem; line-height: 1.55; color: var(--muted); margin-bottom: .5rem; }
.soc-photo-note strong { color: var(--bone); font-weight: 600; }

/* ---------- Folder chips ---------- */

.soc-folders { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.soc-folder {
  background: transparent; border: 1px solid var(--glass-border); border-radius: 999px;
  color: var(--sand); font-family: 'Archivo', sans-serif; font-size: .74rem;
  padding: .28rem .7rem; cursor: pointer;
}
.soc-folder:hover { border-color: var(--amber); color: var(--bone); }
.soc-folder-on { border-color: var(--amber); color: var(--bone); background: rgba(232,162,61,0.12); }
/* The mark, not the chip, carries the colour — a suggested folder is a hint, not
   a selection, and colouring the whole chip would make it look chosen. */
.soc-folder-mark {
  font-size: .6rem; letter-spacing: .5px; text-transform: uppercase; font-weight: 700;
  color: var(--amber); margin-left: .35rem;
}
body.light-theme .soc-folder-mark { color: #9C5C08; }
.soc-folder-suggested { border-color: rgba(232,162,61,0.5); }

/* ---------- The gallery ---------- */

/* auto-fill rather than a fixed count: this is used on a phone at a market and
   on a laptop, and the tile size is what should hold, not the column count. */
.soc-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: .6rem; margin-bottom: 1.2rem;
}

.soc-tile {
  margin: 0; background: var(--charcoal-soft); border: 1px solid var(--glass-border);
  border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
}
.soc-tile-suggested { border-color: rgba(232,162,61,0.55); }

.soc-tile-img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  background: var(--glass-white);
}

/* A photo Drive has not rendered a preview of. It says which — never a grey
   square, which reads as a broken image. */
.soc-tile-noimg {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: .5rem; font-size: .64rem; line-height: 1.4; color: var(--muted);
  object-fit: initial;
}

.soc-tile-name {
  font-size: .68rem; line-height: 1.4; color: var(--sand);
  padding: .4rem .5rem .2rem; word-break: break-word; flex: 1 1 auto;
}
.soc-tile-mark {
  display: block; font-size: .58rem; letter-spacing: .5px; text-transform: uppercase;
  font-weight: 700; color: var(--amber); margin-top: .2rem;
}
body.light-theme .soc-tile-mark { color: #9C5C08; }

.soc-tile-actions { display: flex; align-items: center; gap: .35rem; padding: .2rem .5rem .5rem; }
.soc-tile-link {
  font-size: .68rem; color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--glass-border);
}
.soc-tile-link:hover { color: var(--bone); border-bottom-color: var(--amber); }

/* ---------- Picking a photo for a draft ---------- */

.soc-photo-row { margin-top: .8rem; }

.soc-pick { display: flex; align-items: center; gap: .55rem; margin-top: .45rem; }
.soc-pick-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.soc-pick-main .soc-select { flex: 1 1 160px; width: auto; min-width: 0; }
.soc-pick-actions { display: flex; align-items: center; gap: .35rem; }

.soc-pick-img {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 7px; object-fit: cover;
  border: 1px solid var(--glass-border); background: var(--glass-white);
}
.soc-pick-noimg {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .5rem; line-height: 1.25; color: var(--muted); padding: .2rem;
  overflow: hidden;
}

/* The three reasons there is no picker — not set up, empty folder, still
   loading — read as sentences, not as a disabled control. */
.soc-pick-quiet { font-size: .72rem; line-height: 1.55; color: var(--muted); display: block; }

/* ---------- Coverage ---------- */

.soc-carousel-photos {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  font-size: .72rem; color: var(--muted); margin: .1rem 0 .6rem;
}

.soc-photo-gap { font-size: .72rem; line-height: 1.55; color: var(--sand); margin-bottom: .6rem; }

/* Said once, above the drafts: there is nothing to picture these with. Amber
   rather than red — it is true and it is fixable, and it is the honest version
   of what this module used to do silently. */
.soc-photo-gap-head {
  border: 1px dashed rgba(232,162,61,0.45); border-radius: 10px;
  padding: .7rem .9rem; margin-bottom: 1rem;
}
.soc-photo-gap-title {
  font-size: .64rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
  color: var(--amber); margin-bottom: .3rem;
}
body.light-theme .soc-photo-gap-title { color: #9C5C08; }
.soc-photo-gap-body { font-size: .75rem; line-height: 1.6; color: var(--sand); }