/* ==========================================================================
   Connected Search: orientation components.

   Loaded after academy.css and inherits every variable from it. Nothing here
   introduces a colour, a font or a radius that the design system does not
   already have. These six components are the visual vocabulary of the two
   orientation modules that open every discipline chapter, and they are
   deliberately card-and-panel shaped rather than chart shaped: a reader who
   has never opened Google Ads needs to see the PARTS and how they join, not a
   number moving.

   Every interactive surface here is a real <button>, so keyboard operation and
   focus rings come from the browser rather than from anything invented.
   ========================================================================== */

/* ------------------------------------------------ the orientation marking
   Two places, both quiet. A reader should be able to tell at a glance that the
   first two cards in a chapter make a different promise from the eight after
   them, without the chapter looking like it has a beginners' section bolted on
   the front. Dashed rule, no colour of its own. */
.card.orient::before{opacity:.28}
.card.orient:hover::before{opacity:.6}
.card .st .orientmark{font-family:var(--ui);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4);border:1px dashed var(--line-2);border-radius:6px;padding:1px 7px}
.kicker .orientchip{color:var(--ink-3)}

/* ---------------------------------------------------------------- shared */
.or-lay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.or-panel{background:var(--bg-3);border:1px solid var(--line);border-radius:12px;padding:15px 17px;
  min-height:190px}
.or-panel h6{margin:0 0 3px;font-family:var(--ui);font-size:15px;font-weight:600;color:var(--ink)}
.or-panel .or-role{display:block;margin:0 0 10px;font-family:var(--ui);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.or-dl{margin:0;font-family:var(--ui);font-size:13px;line-height:1.6}
.or-dl dt{color:var(--ink-4);font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-top:11px}
.or-dl dt:first-child{margin-top:0}
.or-dl dd{margin:2px 0 0;color:var(--ink-2)}
.or-dl dd b{color:var(--ink)}
.or-dl dd.no{color:var(--ink-3)}
.or-hint{margin:0;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink-4)}
.or-legend{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 13px}
.or-legend button{cursor:pointer;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;
  padding:6px 11px;font-family:var(--ui);font-size:12.5px;color:var(--ink-3);
  transition:background .16s var(--ease),color .16s var(--ease)}
.or-legend button:hover{background:var(--bg-4);color:var(--ink-2)}
.or-legend button.on{background:var(--accent-soft);border-color:var(--accent-deep);color:var(--ink);font-weight:600}

/* ------------------------------------------------------- 1. the tool map */
/* Grouped cards. The GROUP is the teaching: a newcomer's first question is not
   "what is this tool called" but "what job does this box do", and the answer is
   the heading above it. */
.om-group{margin:0 0 18px}
.om-gh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 3px}
.om-gh h6{margin:0;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink);
  letter-spacing:.05em;text-transform:uppercase}
.om-gh span{font-family:var(--ui);font-size:12.5px;color:var(--ink-4)}
.om-gd{margin:0 0 10px;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink-3);max-width:74ch}
.om-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:9px}
.om-c{cursor:pointer;text-align:left;background:var(--bg-2);border:1px solid var(--line);
  border-radius:11px;padding:11px 13px;transition:background .16s var(--ease),border-color .16s var(--ease)}
.om-c:hover{background:var(--bg-3);border-color:var(--line-2)}
.om-c.on{background:var(--bg-4);border-color:var(--accent-deep)}
.om-c .om-n{display:block;font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.om-c .om-w{display:block;margin-top:4px;font-family:var(--ui);font-size:12px;line-height:1.5;color:var(--ink-4)}
.om-c .om-own{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);
  background:var(--bg-4);border-radius:5px;padding:2px 6px}
.om-c.on .om-own{background:var(--bg-5);color:var(--ink-3)}
.om-detail{margin-top:14px}

/* ---------------------------------------------------- 2. the system chain */
/* One row of numbered steps with an arrow between each. It wraps rather than
   scrolls, because a horizontal scroll bar on a phone hides the second half of
   the idea and nobody finds it. */
.oc-strip{display:flex;flex-wrap:wrap;align-items:stretch;gap:5px;margin:0 0 15px}
.oc-s{position:relative;flex:1 1 108px;min-width:104px;cursor:pointer;text-align:left;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 10px 10px;
  transition:background .16s var(--ease),border-color .16s var(--ease)}
.oc-s:hover{background:var(--bg-3);border-color:var(--line-2)}
.oc-s.on{background:var(--bg-4);border-color:var(--accent-deep)}
.oc-s .oc-n{display:block;font-family:var(--mono);font-size:10px;color:var(--ink-4);letter-spacing:.08em}
.oc-s.on .oc-n{color:var(--accent)}
.oc-s .oc-t{display:block;margin-top:3px;font-family:var(--ui);font-size:12.5px;font-weight:600;
  color:var(--ink-2);line-height:1.35}
.oc-s.on .oc-t{color:var(--ink)}
.oc-s .oc-who{display:block;margin-top:5px;font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase}
.oc-s .oc-who.you{color:var(--money)}
.oc-s .oc-who.them{color:var(--open)}
.oc-s .oc-who.both{color:var(--warn)}
.oc-arrow{align-self:center;font-family:var(--ui);font-size:13px;color:var(--ink-4);flex:0 0 auto;
  padding:0 1px;line-height:1}
.oc-key{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 13px;font-family:var(--ui);font-size:12px;color:var(--ink-4)}
.oc-key i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.oc-key i.you{background:var(--money)}
.oc-key i.them{background:var(--open)}
.oc-key i.both{background:var(--warn)}

/* ------------------------------------------------ 3. the terminology cards */
.ot-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:10px}
.ot-c{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.ot-c .ot-t{margin:0;font-family:var(--ui);font-size:14.5px;font-weight:600;color:var(--ink)}
.ot-c .ot-f{margin:1px 0 0;font-family:var(--mono);font-size:11px;color:var(--ink-4);letter-spacing:.02em}
.ot-c .ot-p{margin:8px 0 0;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink-2)}
.ot-c .ot-m{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line);
  font-family:var(--ui);font-size:12px;line-height:1.55;color:var(--ink-4)}
.ot-c .ot-m b{color:var(--ink-3);font-weight:600}
.ot-c .ot-warn{margin:7px 0 0;font-family:var(--ui);font-size:12px;line-height:1.55;color:var(--warn)}
.ot-count{margin:0 0 12px;font-family:var(--ui);font-size:12.5px;color:var(--ink-4)}

/* ------------------------------------------- 4. what you see, and what next */
.od-lay{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:15px;align-items:start}
.od-list{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}
.od-b{width:100%;text-align:left;cursor:pointer;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;font-family:var(--ui);font-size:13px;line-height:1.45;
  color:var(--ink-3);transition:background .16s var(--ease),color .16s var(--ease)}
.od-b:hover{background:var(--bg-3);color:var(--ink-2)}
.od-b.on{background:var(--bg-4);border-color:var(--accent-deep);color:var(--ink);font-weight:600}
.od-out{background:var(--bg-3);border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.od-step{margin:0 0 14px}
.od-step:last-child{margin-bottom:0}
.od-k{margin:0 0 5px;font-family:var(--ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4)}
.od-k.a{color:var(--accent)}
.od-k.w{color:var(--warn)}
.od-ul{margin:0;padding:0 0 0 17px;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink-2)}
.od-ul li{margin:0 0 3px}
.od-ul li b{color:var(--ink)}
.od-p{margin:0;font-family:var(--ui);font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.od-p b{color:var(--ink)}
.od-not{margin:14px 0 0;padding:11px 13px;background:var(--warn-soft);border-radius:10px;
  font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink-2)}
.od-not b{color:var(--warn)}

/* ----------------------------------------------- 5. the decision pyramid */
/* Five tiers, narrowing upward, because the questions narrow: a great many
   things happened, a few of them mattered, one of them is worth doing today. */
.op-stack{display:flex;flex-direction:column;align-items:center;gap:5px;margin:0 0 15px}
.op-t{cursor:pointer;border:1px solid var(--line);border-radius:9px;background:var(--bg-2);
  padding:10px 14px;font-family:var(--ui);font-size:13px;color:var(--ink-3);text-align:center;
  line-height:1.4;transition:background .16s var(--ease),color .16s var(--ease)}
.op-t:hover{background:var(--bg-3);color:var(--ink-2)}
.op-t.on{background:var(--bg-4);border-color:var(--accent-deep);color:var(--ink);font-weight:600}
.op-t .op-n{font-family:var(--mono);font-size:10px;color:var(--ink-4);letter-spacing:.08em;margin-right:8px}
.op-t.on .op-n{color:var(--accent)}
/* Width is the INVERSE of the level number: level 1 is the broad question at
   the base, level 5 is the single decision at the point. Drawn the other way up
   once, and it read as a funnel widening toward the answer, which is the
   opposite of what the component says. */
.op-w1{width:100%}
.op-w2{width:88%}
.op-w3{width:74%}
.op-w4{width:58%}
.op-w5{width:42%}

/* ------------------------------------------------------------- responsive */
@media (max-width:820px){
  .or-lay{grid-template-columns:1fr}
  .od-lay{grid-template-columns:1fr}
  .or-panel{min-height:0}
  .oc-s{flex:1 1 132px}
  /* A 42%-wide tap target on a phone is a 150px button with three words in it.
     The narrowing is a desktop idea; on a phone the numbers carry the order. */
  .op-t{width:100%}
}
@media (max-width:560px){
  .om-cards{grid-template-columns:1fr}
  .ot-cards{grid-template-columns:1fr}
  .oc-arrow{display:none}
}

@media (prefers-reduced-motion:reduce){
  .or-legend button,.om-c,.oc-s,.od-b,.op-t{transition:none}
}