/* ==========================================================================
   Éclore Press portal · shared stylesheet (Phase 1)
   --------------------------------------------------------------------------
   Direction B, Studio Minimal. Loaded by every page:

     <link href="https://fonts.googleapis.com/css2?family=Marcellus&family=Mulish:wght@400;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="../assets/portal.css">

   The fonts link stays in each page. No @import here.
   ========================================================================== */

:root{
  --terracotta:#C8744B; --rust:#9E4A2E; --charcoal:#2B2724; --cream:#FBF8F2;
  --paper:#FCFBF9; --mustard:#E1A763; --amber:#B5811F; --sage:#929E87;
  --green:#3E7C52; --line:#E3D9C8; --muted:#6F665C; --surface:#FFFFFF;

  /* area colors */
  --area-tasks:#C8744B; --area-social:#E1A763; --area-marketing:#B5811F;
  --area-book:#929E87; --area-business:#9E4A2E; --area-ops:#3E7C52;

  /* status */
  --overdue:#9E4A2E; --due:#8F6416; --ok:#3E7C52;

  /* legacy aliases so existing pages keep working after their own :root is removed */
  --ink:#2B2724; --card:#FFFFFF; --blue:#C8744B; --brown:#9E4A2E; --red:#9E4A2E;
  --pink:#C8744B; --orange:#B5811F; --gold:#E1A763; --teal:#929E87;

  /* nav tokens */
  --pn-line:#E3D9C8; --pn-ink:#2B2724; --pn-muted:#6F665C;
  --pn-rust:#9E4A2E; --pn-terracotta:#C8744B; --pn-cream:#FBF8F2;
}

/* ---------- base ---------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--charcoal);
  font-family:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.93rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}

/* ---------- shared portal nav (.pn-) ---------- */
.pn-nav{position:sticky;top:0;z-index:50;background:rgba(252,251,249,.94);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--pn-line);}
.pn-in{max-width:940px;margin:0 auto;padding:0 20px;display:flex;align-items:stretch;flex-wrap:wrap;gap:0 26px;height:56px;}
.pn-brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none;}
.pn-brand img{width:30px;height:30px;display:block;}
.pn-brand span{font-family:"Marcellus",serif;font-weight:400;font-size:1.04rem;color:var(--pn-rust);letter-spacing:.2px;white-space:nowrap;}
.pn-tabs{display:flex;align-items:stretch;gap:1px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;}
.pn-tabs::-webkit-scrollbar{display:none;}
.pn-tab{display:flex;align-items:center;position:relative;padding:0 10px;white-space:nowrap;text-decoration:none;color:var(--pn-muted);font-weight:600;font-size:.855rem;border-radius:4px;transition:color .12s ease,background .12s ease;}
.pn-tab:hover{color:var(--pn-ink);background:var(--pn-cream);}
.pn-tab[aria-current="page"]{color:var(--pn-ink);}
.pn-tab[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:var(--pn-terracotta);}
.pn-me{display:flex;align-items:center;gap:12px;flex:none;font-size:.8rem;color:var(--pn-muted);}
.pn-me b{font-weight:600;color:var(--pn-ink);}
.pn-me b:empty{display:none;}
.pn-me a{color:var(--pn-muted);text-decoration:none;}
.pn-me a:hover{color:var(--pn-terracotta);text-decoration:underline;}
@media(max-width:760px){
  .pn-in{height:auto;padding:0 14px;align-items:center;}
  .pn-brand{order:1;flex:1;height:48px;}
  .pn-me{order:2;height:48px;}
  .pn-tabs{order:3;flex-basis:100%;height:42px;margin:0 -14px;padding:0 14px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);}
  .pn-tab{padding:0 11px;font-size:.9rem;}
}

/* ==========================================================================
   Shared list primitives (home + area pages)
   --------------------------------------------------------------------------
   Everything below is scoped under .pn-page, the wrapper class the home and
   area pages put on their content div. The live social pages define their own
   .wrap / h1 / .head / .row / .area and never carry .pn-page, so nothing here
   can leak into them: they inherit only the tokens, the nav, and the base.
   ========================================================================== */

.pn-page{max-width:940px;margin:0 auto;padding:34px 20px 72px;}
.pn-page h1{font-family:"Marcellus",serif;font-weight:400;font-size:1.65rem;line-height:1.25;margin:0 0 5px;color:var(--charcoal);}
.pn-page .crumb{font-size:.78rem;color:var(--muted);margin:0 0 12px;}
.pn-page .crumb a{color:var(--muted);text-decoration:none;}
.pn-page .crumb a:hover{color:var(--terracotta);text-decoration:underline;}
.pn-page .head{margin:0 0 30px;}
.pn-page .head p{margin:0;color:var(--muted);font-size:.9rem;max-width:56ch;}

.pn-page section{margin:0 0 34px;}
.pn-page .sh{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;}
.pn-page .sh h2{font-size:.98rem;font-weight:700;margin:0;letter-spacing:-.01em;}
.pn-page .sh .count{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;}
.pn-page .sh .more{margin-left:auto;font-size:.8rem;font-weight:600;color:var(--rust);text-decoration:none;border-bottom:1px solid rgba(200,116,75,.4);}
.pn-page .sh .more:hover{border-bottom-color:var(--terracotta);}

/* stats */
.pn-page .stats{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.pn-page .stat{display:block;padding:14px 16px 15px;text-decoration:none;border-left:1px solid var(--line);transition:background .12s ease;}
.pn-page .stat:first-child{border-left:0;}
.pn-page .stat:hover{background:var(--cream);}
.pn-page .stat .n{display:block;font-size:1.7rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.pn-page .stat .l{display:block;font-size:.78rem;color:var(--muted);margin-top:3px;}
.pn-page .stat.od .n{color:var(--rust);}
.pn-page .stat.wk .n{color:var(--amber);}
.pn-page .stat.op .n{color:var(--charcoal);}

/* rows */
.pn-page .rows{border-top:1px solid var(--line);margin-top:14px;}
.pn-page .row{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 8px;margin:0 -8px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .1s ease;}
.pn-page .row:hover{background:var(--cream);}
.pn-page .row:hover .t{color:var(--rust);}
.pn-page .row .dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--c,var(--sage));}
.pn-page .row .body{min-width:0;flex:1;}
.pn-page .row .t{font-weight:600;font-size:1rem;line-height:1.35;min-width:0;flex:1;transition:color .1s ease;}
.pn-page .row .body .t{display:block;flex:none;}
.pn-page .row .d{font-size:.82rem;color:var(--muted);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pn-page .row .body .d{display:block;margin-top:1px;}
.pn-page .row .meta{flex:none;display:flex;align-items:center;gap:12px;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;}
.pn-page .row .meta .own{min-width:44px;text-align:right;}
.pn-page .row .meta .due{min-width:52px;text-align:right;}
.pn-page .row .meta .date{min-width:64px;text-align:right;}
.pn-page .due.s-overdue{color:var(--rust);font-weight:700;}
.pn-page .due.s-due{color:var(--amber);font-weight:600;}
.pn-page .area{font-size:.75rem;color:var(--muted);white-space:nowrap;}
.pn-page .live{flex:none;font-size:.62rem;font-weight:700;letter-spacing:.09em;color:var(--green);border:1px solid rgba(62,124,82,.5);border-radius:3px;padding:2px 5px 1px;text-transform:uppercase;}
.pn-page .quiet{color:var(--muted);font-size:.86rem;padding:14px 0 4px;margin:0;}

/* shortcuts */
.pn-page .shorts{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.pn-page .short{padding:12px 14px;text-decoration:none;border-left:1px solid var(--line);transition:background .12s ease;}
.pn-page .short:first-child{border-left:0;}
.pn-page .short:hover{background:var(--cream);}
.pn-page .short b{display:block;font-size:.88rem;font-weight:600;}
.pn-page .short span{display:block;font-size:.75rem;color:var(--muted);margin-top:1px;}
.pn-page .short:hover b{color:var(--terracotta);}

/* the page footer sits outside .pn-page, so it carries the class itself */
footer.pn-page{max-width:940px;margin:0 auto;padding:0 20px 60px;color:var(--muted);font-size:.78rem;}

@media(max-width:640px){
  .pn-page{padding:24px 14px 56px;}
  footer.pn-page{padding:0 14px 48px;}
  .pn-page .stats{grid-template-columns:1fr 1fr;}
  .pn-page .stat:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--line);}
  .pn-page .shorts{grid-template-columns:1fr 1fr;}
  .pn-page .short:nth-child(3),.pn-page .short:nth-child(4){border-top:1px solid var(--line);}
  .pn-page .short:nth-child(3){border-left:0;}
  .pn-page .row{min-height:52px;}
  .pn-page .row .meta .own{display:none;}
  .pn-page .row .body .d{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  /* rows that carry a description stack their meta on the right */
  .pn-page .row:has(.body){align-items:flex-start;min-height:56px;}
  .pn-page .row:has(.body) .dot{margin-top:8px;}
  .pn-page .row:has(.body) .meta{flex-direction:column;align-items:flex-end;gap:5px;padding-top:2px;}
  .pn-page .row:has(.body) .meta .date{min-width:0;}
}