/* ============================================================================
   npb-insights.ch — the Outlook timeline
   ============================================================================
   The Quarterly Investment Outlook, its Chartbook, and the flash updates that
   interrupt a quarter.

   WHY A TIMELINE AND NOT A GRID

   Because it is the honest shape of the thing. A quarter is a cluster — two
   documents that belong together — and a flash update only means anything
   positioned relative to the quarter it interrupts. Four quarters in a card
   grid is a dozen equal tiles with the structure thrown away.

   HOW IT STAYS INSIDE THE HOUSE STYLE

   The site's structural device is already the hairline rule, so the spine is a
   1px --line and nothing more. No illustration, no gradient, no horizontal
   scroller. What gives it life is what gives the rest of the site life: the red
   kicker, tabular numerals, generous whitespace, and one restrained shadow on
   the current edition.

   Read top-down at every width. A horizontal timeline would be a scroll trap at
   390px and would hide content behind interaction, which for four to eight
   editions solves a problem nobody has.
   ========================================================================= */

.ol{max-width:52rem}


.ol-state{
  padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-btn);
  background:var(--surface);color:var(--ink-2);font-size:.88rem;line-height:1.6;
}
.ol-state[hidden]{display:none}
.ol-state a{color:var(--npb-red);font-weight:600}

/* ---------- the spine --------------------------------------------------------
   One hairline down the left, with everything hanging off it. The indent is
   deliberately small: this is a document, not an infographic. */
/* The indent has to clear the current edition shadow (0 8px 28px), or the
   hairline is washed out for exactly the height of the newest quarter. */
.ol-line{position:relative;margin:0;padding:0 0 0 2.3rem;list-style:none}
.ol-line::before{
  content:"";position:absolute;left:.36rem;top:.55rem;bottom:.55rem;
  width:1px;background:var(--line);
}

.ol-node{position:relative;padding:0 0 2.4rem}
.ol-node:last-child{padding-bottom:0}

/* The marker. Filled red for the current edition, hollow for everything
   behind it — the only place colour is spent on this page. */
.ol-node::before{
  content:"";position:absolute;left:-2.3rem;top:.42rem;
  width:.72rem;height:.72rem;border-radius:50%;
  background:var(--surface);border:2px solid var(--line);
}
.ol-node.is-current::before{background:var(--npb-red);border-color:var(--npb-red)}


/* ---------- the quarter label ------------------------------------------------
   Big and quiet. Tabular numerals, because the site uses them as texture
   everywhere a number carries meaning. */
.ol-when{display:flex;align-items:baseline;gap:.55rem;margin-bottom:.2rem}
.ol-when .q{
  font-size:1.42rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.ol-when .yr{font-size:1.42rem;font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ol-when .tag{
  margin-left:.2rem;font-size:.58rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--npb-red);background:var(--neg-bg);border-radius:5px;padding:.14rem .42rem;
}
.ol-pub{margin:0 0 .9rem;font-size:.74rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- documents ---------------------------------------------------------
   Two per quarter, and they belong together — so they are rows inside one
   container rather than two cards side by side. The same reasoning that made
   Chartbook a row inside the CIO Outlook card on the section index. */
.ol-docs{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;
}
.ol-node.is-current .ol-docs{box-shadow:var(--shadow)}

.ol-doc{
  display:flex;align-items:center;gap:.9rem;padding:.85rem 1rem;
  text-decoration:none;color:inherit;border-left:2px solid transparent;
  transition:background .14s,border-color .14s;
}
.ol-doc + .ol-doc{border-top:1px solid var(--line-2)}
.ol-doc:hover{background:var(--plane);border-left-color:var(--npb-red)}

/* A PDF glyph, drawn rather than illustrated: a rule and a label, in the same
   register as the rest of the page. */
.ol-doc .ic{
  flex:0 0 auto;width:2.1rem;height:2.6rem;border:1px solid var(--line);border-radius:3px;
  background:var(--plane);position:relative;
}
.ol-doc .ic::after{
  content:"PDF";position:absolute;left:0;right:0;bottom:.28rem;text-align:center;
  font-size:.44rem;font-weight:700;letter-spacing:.06em;color:var(--ink-3);
}
.ol-doc .ic::before{
  content:"";position:absolute;left:.34rem;right:.34rem;top:.42rem;height:1px;
  background:var(--line);box-shadow:0 4px 0 var(--line),0 8px 0 var(--line);
}
.ol-node.is-current .ol-doc:first-child .ic{border-color:var(--npb-red)}
.ol-node.is-current .ol-doc:first-child .ic::after{color:var(--npb-red)}

.ol-doc .meat{min-width:0;flex:1 1 auto}
.ol-doc .t{display:block;font-size:.95rem;font-weight:650;color:var(--ink);letter-spacing:-.005em}
.ol-doc .s{display:block;margin-top:.12rem;font-size:.78rem;color:var(--ink-3)}
/* Page count and weight, before somebody opens a hundred pages on a phone. */
.ol-doc .facts{
  flex:0 0 auto;text-align:right;font-size:.7rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;line-height:1.5;white-space:nowrap;
}
.ol-doc .facts b{display:block;font-weight:600;color:var(--ink-2)}

/* ---------- flash updates ------------------------------------------------------ */
/* A flash gets its own tick on the spine — it IS an event in time — but stays
   nested under the quarter it interrupts rather than floating between
   editions, so the cluster survives. Smaller and hollow: an interruption, not
   a peer. */
.ol-flash{
  position:relative;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  padding:.5rem 0;text-decoration:none;color:inherit;
}
.ol-flash::before{
  content:"";position:absolute;left:-2.08rem;top:.86rem;
  width:.42rem;height:.42rem;border-radius:50%;
  background:var(--plane);border:1.5px solid var(--ink-3);
}
.ol-flash:hover .t{color:var(--npb-red)}
.ol-flash .kick{
  font-size:.56rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:4px;padding:.08rem .34rem;
}
.ol-flash .t{font-size:.9rem;font-weight:600;color:var(--ink-2)}
.ol-flash .d{font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- older editions ------------------------------------------------------
   Everything behind the current quarter is quieter: the reader who wants last
   year's chartbook knows what they are looking for, and the reader who does not
   should not have to wade past it. */
.ol-node.is-past .ol-when .q,
.ol-node.is-past .ol-when .yr{font-size:1.05rem}
.ol-node.is-past .ol-docs{background:transparent;border-color:var(--line-2)}
.ol-node.is-past .ol-doc{padding:.6rem .8rem}
.ol-node.is-past .ol-doc .ic{width:1.5rem;height:1.9rem}
.ol-node.is-past .ol-doc .t{font-size:.88rem;font-weight:600}

.ol-more{
  margin-top:1.6rem;font-size:.8rem;color:var(--ink-3);
  padding-left:2.3rem;line-height:1.6;
}

@media (max-width:520px){
  .ol-doc{flex-wrap:wrap}
  .ol-doc .facts{text-align:left;flex-basis:100%;padding-left:3rem}
  .ol-when .q,.ol-when .yr{font-size:1.2rem}
}

@media print{
  .ol-line::before,.ol-node::before{display:none}
  .ol-line{padding-left:0}
  .ol-docs{box-shadow:none}
}

/* ============================================================================
   The publish console's form — Edge only
   ============================================================================
   Loaded alongside the 3D console's stylesheet, which already carries the
   buttons, messages and tables. This is only the form itself. */

.olform{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.9rem;
  padding:1.2rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow-panel);
}
.olform .f{display:flex;flex-direction:column;gap:.3rem;min-width:0}
/* display:flex on a class outranks the browser rule for [hidden], so anything
   hidden in this form stays stubbornly visible without this. */
.olform .f[hidden]{display:none}
.olform .f.wide{grid-column:1/-1}
.olform .f span{
  font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
}
.olform select,.olform input[type=text],.olform input[type=date],.olform input[type=file]{
  font:inherit;font-size:.86rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-btn);padding:.45rem .6rem;min-width:0;
}
.olform select:focus,.olform input:focus{outline:2px solid var(--npb-red);outline-offset:1px}
.olform input[type=file]{padding:.35rem .5rem;background:var(--plane)}

.olh{
  margin:2rem 0 .6rem;font-size:.74rem;font-weight:700;letter-spacing:.075em;
  text-transform:uppercase;color:var(--navy);
}
.linkbtn{
  font:inherit;font-size:.72rem;font-weight:600;color:var(--ink-3);
  background:none;border:0;cursor:pointer;padding:.1rem .2rem;
}
.linkbtn:hover{color:var(--npb-red);text-decoration:underline}