/* Page-only composition for post-job.html.
   Shared rules live in assets/app.css, which loads first. Tokens only.
   This page needs a form measure, a two-column form/summary split, a
   disclosure, an input adornment, the work-pattern day picker and the
   share-preview dialog; none exist in the shared sheet. */

.post-grid { display: grid; gap: var(--s-6); align-items: start; }
.post-grid[hidden] { display: none; }
.post-main { display: grid; gap: var(--s-6); max-width: 720px; }
.post-submit { display: grid; gap: var(--s-3); max-width: 720px; }
.post-side { display: grid; gap: var(--s-6); align-content: start; }

@media (min-width: 1280px) {
  .post-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .post-main { grid-column: 1; grid-row: 1; }
  .post-side { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: var(--s-4); }
  .post-submit { grid-column: 1; grid-row: 2; }
}

/* .fieldset resets the border that .card draws, so draw it back */
.fieldset.card { border: 1px solid var(--border); }
.post-legend { display: block; width: 100%; padding: var(--s-4); border-bottom: 1px solid var(--border); }
.post-fields { display: grid; gap: var(--s-4); }

.check-group > legend { display: block; margin-bottom: var(--s-2); }
.check-group > .field-help { margin-bottom: var(--s-2); }
.check-list { display: grid; gap: var(--s-1); }
.check-row .check-label { display: flex; align-items: center; min-height: 44px; cursor: pointer; }

/* an "Internal" marker sits inline in the label it qualifies */
.field-label > .pill-soft { margin-left: var(--s-2); vertical-align: middle; }
.field-opt {
  display: inline-block; margin-left: var(--s-2); padding: 0 var(--s-2);
  border-radius: var(--r-pill); background: var(--surface-sunken);
  font-size: var(--fs-micro); line-height: 18px; font-weight: 400; color: var(--ink-muted);
}
.select-short { max-width: 240px; }
.btn-block { width: 100%; justify-content: center; }
.share-row { --od-gap: var(--s-3); flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Work pattern: how many days in the workplace, and which ones
   --------------------------------------------------------------------------- */
.pattern-config {
  display: grid; gap: var(--s-4);
  margin-top: var(--s-3); padding: var(--s-4);
  border-radius: var(--r-control); background: var(--surface-sunken);
}
.pattern-config[hidden] { display: none; }
/* .field-help sets display: block, so the UA's [hidden] needs restating */
.pattern-note { margin: var(--s-3) 0 0; }
.pattern-note[hidden] { display: none; }

.day-group > legend { display: block; margin-bottom: var(--s-2); }
.day-picker { --od-gap: var(--s-2); margin-bottom: var(--s-2); }
.day-slot { display: inline-flex; }
.day-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: 44px; min-width: 60px; padding-inline: var(--s-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-small); font-weight: 600; color: var(--ink);
  cursor: pointer;
  transition: background-color var(--t-state), border-color var(--t-state), color var(--t-state);
}
.day-check { display: none; font-size: var(--fs-micro); }
.day-input:checked + .day-chip { background: var(--primary); border-color: var(--primary); color: var(--surface); }
.day-input:checked + .day-chip .day-check { display: inline; }
.day-input:focus-visible + .day-chip { outline: 2px solid var(--focus); outline-offset: 2px; }
.day-input:disabled + .day-chip { opacity: .5; cursor: not-allowed; }
@media (hover: hover) {
  .day-chip:hover { border-color: var(--primary); }
  .day-input:checked + .day-chip:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
}

.salary-row { --od-gap: var(--s-3); flex-wrap: wrap; }
.salary-row > * { flex: 1 1 148px; }
.input-prefix { position: relative; display: block; }
.prefix-mark { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.input-prefix > .input { padding-left: var(--s-6); }

.disclosure { border-top: 1px solid var(--border); padding-inline: var(--s-4); }
.disclosure > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; cursor: pointer; color: var(--primary); font-size: var(--fs-small); font-weight: 600; list-style: none; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover { color: var(--primary-hover); }
.disclosure-chevron { transition: transform var(--t-state); }
.disclosure[open] > summary .disclosure-chevron { transform: rotate(90deg); }
.disclosure-body { display: grid; gap: var(--s-4); padding-bottom: var(--s-4); }

.tag-list { --od-gap: var(--s-2); min-height: 44px; }
.tag { padding: 0 var(--s-1) 0 var(--s-3); }
.tag .btn-icon { background: transparent; border-color: transparent; }
.tag .btn-icon:hover { background: var(--surface); }
.tag-add { --od-gap: var(--s-2); }

.summary-list { display: grid; gap: var(--s-3); }
.summary-value { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; color: var(--ink); }
.summary-value.is-unset { font-weight: 400; color: var(--ink-muted); }
.guide-list { display: grid; gap: var(--s-3); }

.submit-row { --od-gap: var(--s-3); flex-wrap: wrap; }
.btn-publish { min-width: 180px; }

.success-body { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-8) var(--s-4); }
.success-disc { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary); }
.success-actions { --od-gap: var(--s-2); flex-wrap: wrap; }

/* ===========================================================================
   Share preview dialog
   The shared .dialog is a 480px confirm box; this one is a wide reading
   surface with a fixed head, a tab strip, a scrolling body and a foot.
   [open] keeps the UA's dialog:not([open]) { display: none } intact.
   =========================================================================== */
.dialog-wide { width: min(880px, calc(100vw - var(--s-8))); }
.dialog-wide[open] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-height: min(88dvh, 900px);
}
.dialog-wide .dialog-head { --od-gap: var(--s-3); }

.preview-tabwrap { border-bottom: 1px solid var(--border); background: var(--surface); }
.preview-tabs { --od-gap: var(--s-1); --od-rail-pad: var(--s-4); padding-block: var(--s-2); }
.preview-tab {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding-inline: var(--s-3);
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: transparent; font-family: inherit;
  font-size: var(--fs-small); font-weight: 600; color: var(--ink-muted);
  cursor: pointer;
  transition: background-color var(--t-state), color var(--t-state), border-color var(--t-state);
}
.preview-tab[aria-selected="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-hover); }
@media (hover: hover) {
  .preview-tab:hover { background: var(--surface-sunken); color: var(--ink); }
  .preview-tab[aria-selected="true"]:hover { background: var(--primary-soft); color: var(--primary-hover); }
}
.preview-tab-dot { display: block; width: 8px; height: 8px; border-radius: var(--r-pill); }

/* ---- platform chrome values, centralised once --------------------------- */
.preview-body {
  --li-accent: #0A66C2;
  --fb-accent: #1877F2;
  --fb-foot: #F2F3F5;
  --x-ground: #000000;
  --x-ink: #E7E9EA;
  --x-meta: #71767B;
  --x-line: #2F3336;
  --wa-ground: #EFEAE2;
  --wa-bubble: #D9FDD3;
  --wa-ink: #111B21;
  --wa-meta: #3B4A54;
  --sc-radius: 10px;
}
.dot-linkedin { background: #0A66C2; }
.dot-facebook { background: #1877F2; }
.dot-x        { background: #0F1419; }
.dot-whatsapp { background: #25D366; }

.preview-body { display: grid; gap: var(--s-4); padding: var(--s-4); color: var(--ink); }
.preview-panel { display: grid; gap: var(--s-3); }
.preview-panel[hidden] { display: none; }
.preview-panel:focus-visible { outline-offset: 4px; }
.preview-note { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); }

.preview-hint {
  display: flex; align-items: flex-start; gap: var(--s-2); margin: 0;
  padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--info-soft); color: var(--ink);
  font-size: var(--fs-small); line-height: var(--lh-small);
}
.preview-hint[hidden] { display: none; }
.preview-hint > svg { flex: none; color: var(--info); }

/* ---- the shared parts of a share card ---------------------------------- */
.sc {
  display: grid; gap: var(--s-3);
  border-radius: var(--sc-radius);
  font-family: var(--font-body);
}
.sc-head { --od-gap: var(--s-3); }
.sc-avatar {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--r-control); background: var(--primary); color: var(--surface);
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
}
.sc-avatar-round { border-radius: var(--r-pill); }
.sc-author { display: block; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 700; color: inherit; }
.sc-meta { display: block; font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-muted); }
.sc-meta-row { display: flex; align-items: center; gap: var(--s-1); }
.sc-copy { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: inherit; white-space: pre-line; overflow-wrap: anywhere; }
.sc-follow { font-size: var(--fs-small); font-weight: 600; color: var(--li-accent); }
.sc-dots { font-size: 18px; color: var(--ink-muted); letter-spacing: .1em; }
.sc-actions { --od-gap: var(--s-4); flex-wrap: wrap; }
.sc-action { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-micro); font-weight: 600; color: var(--ink-muted); }

/* the link unit: a composed open-graph card plus the platform's own footer */
.sc-link { border: 1px solid var(--border); border-radius: var(--r-control); overflow: hidden; }
.sc-link-flush { border-radius: 0; border-inline: 0; }
.sc-link-foot { display: grid; gap: var(--s-1); padding: var(--s-3); background: var(--surface); }
.sc-link-title { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 700; color: inherit; }
.sc-link-desc { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-muted); }
.sc-link-domain { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-muted); }
.sc-link-domain-caps { letter-spacing: .04em; }
.sc-link-cta {
  align-self: center; margin: 0 var(--s-3) var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-control);
  background: var(--surface-sunken); font-size: var(--fs-small); font-weight: 600; color: var(--ink);
}

/* the open-graph card we would actually render: 1.91:1, brand ground, no
   stock photography and no invented numbers — just the role, set in type */
.og-card {
  --og-title: 26px;
  display: flex; flex-direction: column; gap: var(--s-1);
  aspect-ratio: 1.91 / 1; padding: var(--s-4) var(--s-6);
  background: var(--primary); color: var(--surface);
}
.og-eyebrow {
  font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .85);
}
.og-title {
  margin-top: auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-family: var(--font-display); font-size: var(--og-title); line-height: 1.15;
  font-weight: 700; letter-spacing: -.01em;
}
.og-meta { font-size: var(--fs-small); line-height: var(--lh-small); color: rgba(255, 255, 255, .9); }
.og-mark { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.og-mark-disc {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  border-radius: var(--r-control); background: var(--surface); color: var(--primary);
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
}
.og-mark-name { font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 600; letter-spacing: .02em; }

/* ---- LinkedIn ----------------------------------------------------------- */
.sc-linkedin {
  padding: var(--s-4); border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-card);
}
.sc-linkedin .sc-actions { padding-top: var(--s-3); border-top: 1px solid var(--border); }

/* ---- Facebook ----------------------------------------------------------- */
.sc-facebook {
  padding: var(--s-4) 0; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-card);
}
.sc-facebook > .sc-head,
.sc-facebook > .sc-copy,
.sc-facebook > .sc-actions { margin-inline: var(--s-4); }
.sc-facebook .sc-link-flush { display: grid; background: var(--fb-foot); }
.sc-facebook .sc-link-foot { background: var(--fb-foot); }
.sc-facebook .sc-link-cta { background: var(--surface); border: 1px solid var(--border-strong); justify-self: stretch; text-align: center; }
.sc-facebook .sc-actions { padding-top: var(--s-3); border-top: 1px solid var(--border); }

/* ---- X ------------------------------------------------------------------ */
.sc-x {
  padding: var(--s-4); border: 1px solid var(--x-line);
  background: var(--x-ground); color: var(--x-ink);
}
.sc-x .sc-meta,
.sc-x .sc-handle,
.sc-x .sc-link-domain,
.sc-x .sc-action { color: var(--x-meta); }
.sc-x .sc-head-line { --od-gap: var(--s-2); }
.sc-x .sc-handle { font-size: var(--fs-small); line-height: var(--lh-small); }
.sc-x .sc-copy { margin-top: var(--s-2); }
.sc-x .sc-avatar { background: var(--surface); color: var(--primary); }
.sc-x .sc-link { margin-top: var(--s-3); border-color: var(--x-line); border-radius: var(--r-card); }
.sc-x .sc-link-foot { background: var(--x-ground); }
.sc-x .sc-link-title { color: var(--x-ink); }
.sc-x .sc-actions { --od-gap: var(--s-8); margin-top: var(--s-3); }
.og-card-x { aspect-ratio: 2 / 1; }

/* ---- WhatsApp ----------------------------------------------------------- */
.sc-whatsapp {
  padding: var(--s-6) var(--s-4); border: 1px solid var(--border);
  border-radius: var(--r-card); background: var(--wa-ground);
}
.wa-bubble {
  display: grid; gap: var(--s-2); justify-self: end;
  width: min(420px, 100%); margin-left: auto;
  padding: var(--s-2) var(--s-2) var(--s-1);
  border-radius: var(--sc-radius); background: var(--wa-bubble); color: var(--wa-ink);
  box-shadow: 0 1px 1px rgba(17, 27, 33, .13);
}
.wa-link { border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, .6); }
.wa-link-foot { display: grid; gap: 2px; padding: var(--s-2) var(--s-3) var(--s-3); }
.wa-link-foot .sc-link-title { color: var(--wa-ink); }
.wa-link-foot .sc-link-desc,
.wa-link-foot .sc-link-domain { color: var(--wa-meta); }
.og-card-wa { --og-title: 17px; padding: var(--s-3) var(--s-4); }
.og-card-wa .og-meta { font-size: var(--fs-micro); line-height: var(--lh-micro); }
.wa-stamp { --od-gap: var(--s-1); justify-content: flex-end; font-size: var(--fs-micro); color: var(--wa-meta); }

/* ---- foot --------------------------------------------------------------- */
.preview-foot { display: grid; gap: var(--s-3); justify-content: stretch; }
.preview-connect {
  --od-gap: var(--s-2); align-items: flex-start; margin: 0;
  font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-muted);
}
.preview-connect > svg { flex: none; margin-top: -1px; }
.preview-foot-actions { --od-gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 640px) {
  .og-card { --og-title: 20px; padding: var(--s-3) var(--s-4); }
  .og-card-wa { --og-title: 16px; }
  .sc-actions { --od-gap: var(--s-3); }
  .sc-x .sc-actions { --od-gap: var(--s-6); }
  .preview-foot-actions { justify-content: stretch; }
  .preview-foot-actions > .btn { flex: 1 1 140px; justify-content: center; }
}