/* Feed my Flow — palette carried over from the original tool (Constants.js) */
:root{
  --primary:#008FBF; --light:#3DA7CA; --dark:#00698C;
  --shade1:#133540; --shade2:#003040; --error:#F54C4C;
  --warn:#B7791F; --ok:#2F855A;
  --bg:#EAF2F5; --surface:#fff; --line:#D9E4E9;
  --text:#133540; --muted:#6B7F89;
  --radius:10px; --shadow:0 1px 3px rgba(19,53,64,.10),0 6px 20px rgba(19,53,64,.06);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
h1{font-size:28px;margin:0 0 4px}
h2{font-size:17px;margin:0}
a{color:var(--dark)}
.lede{color:var(--muted);margin:0}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}

/* ── top bar ───────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:24px;padding:0 24px;height:60px;
  background:var(--shade1);color:#fff;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700}
.brand-mark{display:flex;flex-direction:column;gap:3px}
.brand-mark span{display:block;height:3px;background:#fff;border-radius:2px}
.brand-mark span:nth-child(1){width:18px}
.brand-mark span:nth-child(2){width:12px}
.brand-mark span:nth-child(3){width:7px}
.brand-mark-lg span{height:5px;gap:5px}
.brand-mark-lg span:nth-child(1){width:30px}
.brand-mark-lg span:nth-child(2){width:20px}
.brand-mark-lg span:nth-child(3){width:11px}
.topnav{display:flex;gap:20px;margin-left:8px}
.topnav a{color:#C9DCE4;text-decoration:none;font-size:14px;padding:4px 0;border-bottom:2px solid transparent}
.topnav a:hover{color:#fff}
.topnav a.active{color:#fff;border-bottom-color:var(--primary)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.account{display:flex;align-items:center;gap:8px;font-size:14px}
.account-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.avatar-fallback{display:grid;place-items:center;background:var(--primary);color:#fff;
  font-size:12px;font-weight:700}
.lang select{background:transparent;color:#C9DCE4;border:1px solid #3C5A66;
  border-radius:6px;padding:3px 6px;font-size:13px}
.pill{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;text-decoration:none}
.pill-warn{background:#FBE8C6;color:#7A5210}

/* ── layout ────────────────────────────────────────────── */
.page{max-width:1240px;margin:0 auto;padding:24px}
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.dash-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
@media(max-width:1000px){.dash-grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px}
.panel-title{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  margin-bottom:12px}

/* ── buttons ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font:inherit;font-weight:600;padding:9px 16px;border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--text);text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--light)}
.btn-primary{background:var(--shade2);border-color:var(--shade2);color:#fff}
.btn-primary:hover{background:var(--dark);border-color:var(--dark)}
.btn-ghost{background:transparent;border-color:transparent;color:inherit}
.topbar .btn-ghost{color:#C9DCE4}
.btn-danger{color:var(--error);border-color:#F3C9C9}
.btn-danger:hover{background:#FDF0F0;border-color:var(--error)}
.btn-sm{padding:6px 12px;font-size:13px}
.btn-xs{padding:4px 9px;font-size:12px;font-weight:500}
.btn-icon{width:32px;padding:6px 0;font-size:16px;line-height:1}
.btn-linkedin{background:#0A66C2;border-color:#0A66C2;color:#fff;width:100%;padding:12px}
.btn-linkedin:hover{background:#004182;border-color:#004182}

/* ── login ─────────────────────────────────────────────── */
.login-wrap{min-height:calc(100vh - 120px);display:grid;place-items:center}
.login-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:40px;max-width:420px;text-align:center}
.login-card .brand-mark{align-items:center;margin:0 auto 16px}
.login-card h1{font-size:26px}
.login-card .lede{margin:8px 0 26px}
.perm-list{list-style:none;padding:0;margin:22px 0 0;text-align:left;font-size:13px;color:var(--muted)}
.perm-list li{padding:6px 0 6px 22px;position:relative}
.perm-list li::before{content:"✓";position:absolute;left:0;color:var(--primary);font-weight:700}
.fineprint{font-size:14px;color:var(--muted);margin:18px 0 0;line-height:1.5}

/* ── calendar ──────────────────────────────────────────── */
.cal-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cal-nav{display:flex;gap:6px}
.cal-title{flex:1;text-align:center;font-size:16px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg-btn{border:0;background:#fff;padding:6px 14px;cursor:pointer;font:inherit;font-size:13px}
.seg-btn.is-active{background:var(--bg);font-weight:600}
/* minmax(0,1fr), not 1fr: plain `1fr` means minmax(AUTO,1fr), so a track grows
   to its content's intrinsic minimum. A nowrap post title then widens its day
   and squeezes the other six. The 0 minimum lets overflow:hidden do its job. */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);
  border-radius:8px;overflow:hidden}
.cal-dow{background:#F4F8FA;padding:7px 8px;font-size:12px;font-weight:600;color:var(--muted);
  text-align:center;border-bottom:1px solid var(--line);min-width:0}
.cal-cell{min-height:92px;padding:6px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);background:#fff;min-width:0;overflow:hidden}
.cal-cell:nth-child(7n){border-right:0}
.cal-cell.is-other{background:#FAFCFD;color:#B4C4CB}
.cal-cell.is-today .cal-daynum{background:var(--primary);color:#fff}
.cal-daynum{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;
  font-size:12px;font-weight:600}
.cal-week .cal-cell{min-height:190px}
.chip{display:block;width:100%;max-width:100%;min-width:0;text-align:left;border:0;cursor:pointer;font:inherit;
  margin-top:4px;padding:3px 6px;border-radius:4px;font-size:11.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-person{background:#D6EEF6;color:var(--shade2)}
.chip-organization{background:#DDE7C8;color:#3E4E1E}
.chip-published{opacity:.55}

/* ── upcoming ──────────────────────────────────────────── */
.upcoming{display:flex;flex-direction:column;gap:10px;max-height:560px;overflow:auto}
.up-card{border:1px solid var(--line);border-radius:8px;padding:11px}
.up-meta{display:flex;justify-content:space-between;gap:8px;align-items:center;
  font-size:12px;color:var(--muted);margin-bottom:6px}
.tgt{font-weight:600;padding:2px 7px;border-radius:999px;font-size:11px}
.tgt-person{background:#D6EEF6;color:var(--shade2)}
.tgt-organization{background:#DDE7C8;color:#3E4E1E}
.up-body{margin:0;font-size:13.5px;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.up-link{display:inline-block;margin-top:6px;font-size:11.5px;color:var(--dark)}
.up-actions{display:flex;gap:6px;margin-top:9px}
.empty{text-align:center;color:var(--muted);padding:28px 10px}
.empty p{margin:0 0 12px}

/* ── modal / composer ──────────────────────────────────── */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(19,53,64,.55)}
.modal-card{position:relative;background:#fff;border-radius:12px;width:min(1000px,100%);
  max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.modal-x{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:var(--muted)}
.composer{display:grid;grid-template-columns:1fr 380px;gap:22px;padding:20px}
@media(max-width:900px){.composer{grid-template-columns:1fr}}
.field{display:block;margin-bottom:14px}
.field .label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.field .label em{color:var(--error);font-style:normal}
.field input[type=date],.field input[type=time],.field input[type=url],
.field select,.field textarea,.field input[type=file]{
  width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.field textarea{resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr .8fr;gap:12px}
@media(max-width:700px){.field-row{grid-template-columns:1fr}}
.counter{display:block;text-align:right;font-size:11.5px;color:var(--muted);margin-top:3px}
.counter.over{color:var(--error);font-weight:700}
.hint{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.composer-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}

.target-select{display:flex;flex-direction:column;gap:6px}
.target-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;cursor:pointer;background:#fff}
.target-opt:hover{border-color:var(--light)}
.target-opt.is-selected{border-color:var(--primary);background:#F2FAFD;box-shadow:0 0 0 1px var(--primary) inset}
.target-opt input{display:none}
.target-opt small{display:block;color:var(--muted);font-size:11.5px}

/* ── LinkedIn-style preview ────────────────────────────── */
.preview-label{font-size:12.5px;font-weight:600;color:var(--muted);display:block;margin-bottom:6px}
.li-card{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;
  box-shadow:var(--shadow);position:sticky;top:12px}
.li-head{display:flex;gap:9px;align-items:center;padding:12px}
.li-head strong{display:block;font-size:14px}
.li-head small{color:var(--muted);font-size:11.5px}
.li-body{padding:0 12px 12px;font-size:13.5px;white-space:pre-wrap;word-break:break-word}
.li-body .tag{color:var(--dark);font-weight:600}
.li-embed{display:block;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.li-embed-img{height:150px;background:#E3ECF0 center/cover no-repeat}
.li-embed-meta{padding:9px 12px;background:#F4F8FA}
.li-embed-meta strong{display:block;font-size:13px}
.li-embed-meta small{color:var(--muted);font-size:11.5px}
.li-foot{display:flex;justify-content:space-around;border-top:1px solid var(--line);
  padding:7px;color:var(--muted);font-size:12.5px}

/* ── tables / settings ─────────────────────────────────── */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:8px;border-bottom:1px solid var(--line)}
.table td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.excerpt{max-width:460px}
.empty-cell{text-align:center;color:var(--muted);padding:28px}
.status{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px}
.status-published{background:#D8EFE1;color:var(--ok)}
.status-failed{background:#FBDDDD;color:var(--error)}
.status-warn{background:#FBE8C6;color:var(--warn)}
.status-scheduled{background:#D6EEF6;color:var(--shade2)}
.settings-panel{margin-bottom:18px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;margin:0 0 16px;font-size:14px}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.settings-actions{display:flex;gap:10px}
.target-list-static{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:9px}
.target-list-static li{display:flex;align-items:center;gap:10px}
.target-list-static small{display:block;color:var(--muted);font-size:11.5px}

/* ── flashes ───────────────────────────────────────────── */
.flashes{max-width:1240px;margin:16px auto 0;padding:0 24px;display:flex;flex-direction:column;gap:8px}
.flash{padding:10px 14px;border-radius:8px;font-size:13.5px;border:1px solid}
.flash-error{background:#FDF0F0;border-color:#F3C9C9;color:#8C2020}
.flash-success{background:#E9F7EF;border-color:#BFE3CD;color:#1E5B3A}
.flash-warning{background:#FEF6E6;border-color:#F2DDB0;color:#7A5210}


/* Recovering a first comment LinkedIn refused (history page). */
.comment-recover { display: flex; gap: .75rem; align-items: flex-start; margin: .5rem 0; }
.comment-recover textarea {
  flex: 1; font: inherit; padding: .5rem; border: 1px solid var(--line, #d4d8dd);
  border-radius: 6px; background: var(--surface-2, #f7f8fa); resize: vertical;
}
.comment-recover-actions { display: flex; flex-direction: column; gap: .35rem; }
.row-detail > td { padding-top: 0; }
.row-detail details { margin-top: .25rem; }
.row-detail summary { cursor: pointer; }


.sitefoot {
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
  padding: 1.75rem 1.25rem 2.25rem;
  color: var(--muted, #6b7280); font-size: .8125rem;
}
.sitefoot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sitefoot a:hover { color: var(--text, #111827); }
.sitefoot .dot { opacity: .5; }


/* Beta marker on the login card. Red on purpose — it is the one thing on that
   page that should not be mistaken for decoration. */
.login-card .beta-tag,
.beta-tag {
  margin: 6px 0 0;
  text-align: center;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #c0392b;
}
@media (prefers-color-scheme: dark) {
  .login-card .beta-tag, .beta-tag { color: #ff7a6b; }
}


/* Prototype warning on the dashboard. Amber rather than red: red is reserved
   for things that have actually gone wrong, and a permanent red bar teaches
   people to ignore red. */
.prototype-notice {
  display: flex; gap: .75rem; align-items: flex-start;
  margin: 0 0 20px;
  padding: .85rem 1rem;
  background: #fff8e1;
  border: 1px solid #f0d98c;
  border-left: 4px solid #e0a800;
  border-radius: 8px;
  color: #6b5314;
  font-size: 14px; line-height: 1.5;
}
.prototype-notice p { margin: 0; }
.prototype-notice strong { color: #4a3a06; }
.prototype-notice-icon { font-size: 1.05rem; line-height: 1.4; }
@media (prefers-color-scheme: dark) {
  .prototype-notice {
    background: #2e2716; border-color: #55471f; border-left-color: #b8860b;
    color: #e7d9a8;
  }
  .prototype-notice strong { color: #f5ead0; }
}