/* ----------------------------------------------------------------
   THE navbar. One component, shared by every page including home, so the
   links land on the same pixel wherever you are. Home wears the .bare
   modifier at the bottom of this file: no chrome, no title, no Home link.
   Nothing else may redeclare .flag.
   ---------------------------------------------------------------- */
/* the notch inset: pages declare viewport-fit=cover, the bar absorbs the
   status area and its glass extends under it. Desktop resolves to 0. The
   mobile shim injects a value to emulate the device. */
:root{--sat:env(safe-area-inset-top,0px)}
.flag{position:sticky;top:0;z-index:300;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  padding:calc(9px + var(--sat)) 20px 9px;min-height:40px;   /* fixed, so a bar with steppers and one without still align */
  background:var(--paperT);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);font:11px/1.4 var(--sysMono);letter-spacing:.08em;color:var(--flagink);
  -webkit-user-select:none;user-select:none}   /* nothing on the navbar is selectable: fast toggle clicks read as double-click and grabbed the trigger text */
.flag .navhome{justify-self:start;font:700 11px/1 var(--sysFont);letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);text-decoration:none;transition:color .15s}
.flag .navhome:hover{color:var(--ink)}
/* Same type as Home and the right-hand links, and it reserves the width of the
   longest project name so the steppers hold their place across projects.
   "TRUST WALLET" at Inter 700 11px uppercase, 1.32px tracking, measures 100.84.
   Held as px: Inter is proportional, so there is no ch or em to derive it from,
   and mara sets its own .fv font-family. Re-measure if a longer name arrives. */
.flag .fv{justify-self:center;text-align:center;white-space:nowrap;margin:0;
  font:700 11px/1 var(--sysFont);letter-spacing:.12em;text-transform:uppercase;
  min-width:100.84px}
/* Title steppers. The centre cell holds prev, title, next as one group so the
   title stays optically centred whatever its length. */
.flag .fvwrap{justify-self:center;display:inline-flex;align-items:center;gap:12px}
/* Target area is decoupled from the component. The element IS the visual: 20x20
   on the 5px radius it wore when it had a stroke, and that is all the hover wash
   ever fills. The ::before is a transparent hit expander, 28x28, twice the area
   (400 -> 784), painting nothing and shifting nothing. */
.flag .step{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border:0;border-radius:5px;background:transparent;color:var(--flagink);
  font:600 11px/1 var(--sysFont);text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.flag .step::before{content:"";position:absolute;inset:-4px}
.flag .step:hover{color:var(--ink);
  background:color-mix(in srgb, currentColor 7%, transparent)}

/* Right nav, matching home's .tops exactly: 22px gap, same type. The theme
   switch keeps its position and the links append to its left. */
.flag .tops{justify-self:end;display:flex;align-items:center;gap:22px}
.flag .tops a{font:700 11px/1 var(--sysFont);letter-spacing:.12em;text-transform:uppercase;
  color:var(--flagink);text-decoration:none;white-space:nowrap}
.flag .tops a:hover{color:var(--ink)}
/* the bar's narrow tier (481-560): with four links the right nav no longer
   clears the project name at the 22 rhythm, so the two long names shed their
   second half and read IN and GIT. The word is whole in the markup, the half
   is a span: nothing is renamed, only hidden. Above 560 the bar has the room
   and the names return; below 481 the drawer owns them and never crops. */
@media(min-width:481px) and (max-width:560px){
  .flag .tops a .hlf{display:none}
}
.flag .tops .thsw{justify-self:auto}
.flag b{color:var(--lab);font-weight:600}
.flag .thsw{justify-self:end;display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);
  border-radius:999px;padding:2px;cursor:pointer}
.flag .thsw button{font:600 10px/1 var(--sysFont);letter-spacing:.1em;text-transform:uppercase;background:none;
  border:0;color:var(--mut);cursor:pointer;padding:5px 9px;border-radius:999px;transition:background .15s,color .15s}
.flag .thsw button.ic{width:32px;padding:0;height:20px;display:inline-flex;align-items:center;justify-content:center}
.flag .thsw button.ic svg{width:14px;height:14px;display:block}
.flag .thsw button:hover{color:var(--ink)}
.flag .thsw button.on{background:var(--line);color:var(--ink)}

/* mobile (max 480), pages carrying the drawer markup: the project name
   sits at the bar's RIGHT with a chevron on its left, and it IS the one
   trigger (the .bgr <details>, whose summary carries the name). The
   browser owns toggle and keyboard, no script, and :has() projects its
   state onto the drawer.
   ONE surface: the bar's veil, blur and bottom hairline live on a
   ::before that is the whole nav surface, 44px at rest, stretched to
   --mnavH (a predefined constant, the content is known text) while open,
   so the bar's own bottom lip pushes down and slides back up. The flag's
   in-flow box never changes: no layout shift, sticky stays clean.
   Stacking inside the bar's context: surface -2, drawer content -1, bar
   row on top. ONE drawer, two columns: .tops left (theme switch up top,
   then Home + the meta links stacked from the floor), .pjd right (every
   project, right-aligned, a tick left of the current one). No hairlines
   inside; the only line is the surface's own lip. Scoped to :has(.bgr):
   pages not yet carrying the markup keep the desktop bar until they are
   retrofitted. */
.flag .bgr,.flag .pjd,.flag .pjx{display:none}

/* DESKTOP experiment, pages carrying .pjx (Confirmo for now): the bar's
   left reads HOME | PROJECT-NAME-with-chevron as one group, divider
   included, and the chevron opens a dropdown of the projects (the same
   .pjd node the mobile drawer uses), hanging from the bar at the group's
   left line. The centered steppers hide while this rides. */
@media(min-width:481px){
  .flag:has(.pjx){height:44px}   /* height pinned so the veil's clip geometry is a constant */
  /* the bar's veil moves to a ::before, as the mobile tier does: with
     backdrop-filter on .flag itself the bar becomes the backdrop root and
     the dropdown's own blur stops seeing the page behind */
  .flag:has(.pjx){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
  .flag:has(.pjx)::before{content:"";position:absolute;inset:0;z-index:-1;
    background:var(--paperT);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line)}
  .flag:has(.pjx) .fvwrap{display:none}
  .flag:has(.pjx) .tops{grid-column:3}   /* fvwrap gone; without the pin, auto-placement slides the right nav out of the last column */
  .flag:has(.pjx) .navhome,.flag:has(.pjx) .tops a{padding:13px 0;margin-block:-13px}   /* breathe like the dropdown rows, but the hit padding must not inflate the grid row: it anchored the whole bar low */
  /* trigger on the content column's left line: max(32px, 50% - 418px),
     the page column being 900 with 32 padding */
  .flag .pjx{display:block;position:absolute;left:max(32px,calc(50% - 418px));top:0;bottom:0}
  .flag .pjx summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;height:100%;
    font:700 11px/1 var(--sysFont);letter-spacing:.12em;text-transform:uppercase;color:var(--flagink)}
  .flag .pjx summary::-webkit-details-marker{display:none}
  .flag .pjx summary svg{color:var(--mut);transition:transform .2s ease}
  .flag .pjx[open] summary svg{transform:rotate(180deg)}
  /* outside click dismisses: the open summary wears a full-viewport hit
     expander (the .step::before idea, grown up); the panel z-indexes over
     it, so its links stay clickable */
  .flag .pjx[open] summary::before{content:"";position:fixed;inset:0;cursor:default}
  /* panel left = the trigger's column line minus its own 28 pad: the names
     inside sit flush under the bar's project name */
  .flag:has(.pjx[open]) .pjd{display:flex;position:absolute;left:max(4px,calc(50% - 446px));top:100%;z-index:1;
    flex-direction:column;width:216px;height:214px;padding:11.2px 28px 16.8px;
    border:1px solid var(--line);border-top:0;
    transition:opacity .16s ease,transform .2s ease}
  /* the lip contours the dropdown: while open the bar's own hairline goes
     transparent and the panel redraws it — side and bottom borders plus two
     segments running from its top corners to the screen edges, on the very
     line the lip held (top:-1px = inside edge of the bar's 1px border).
     The rightward segment is 100vw and relies on the page's overflow-x:clip
     invariant to die at the viewport.
     ONE veil: two abutting backdrop-filters always seam (each blurs its own
     clamped backdrop), so the bar's ::before grows over bar AND panel and a
     polygon clips the combined outline: one continuous blur. Constants:
     bar 44; panel w 216, h 214 = 11.2 + 5 rows x 37 + 16.8 + 1px border
     (content known, nothing measured); panel x rides the column line, so
     the clip's x pair is the trigger's max() minus the panel's 28 pad,
     plus 216. Where shape() exists the same outline gets 8px arcs on the
     panel's bottom corners; elsewhere the polygon keeps them square. */
  .flag:has(.pjx[open])::before{border-bottom-color:transparent;height:258px;
    clip-path:polygon(0 0,100% 0,100% 44px,max(220px,50% - 230px) 44px,max(220px,50% - 230px) 258px,max(4px,50% - 446px) 258px,max(4px,50% - 446px) 44px,0 44px)}
  @supports (clip-path: shape(from 0 0, close)) {
    .flag:has(.pjx[open])::before{clip-path:shape(from 0 0,
      hline to 100%, vline to 44px,
      hline to max(220px, 50% - 230px),
      vline to 250px,
      arc to max(212px, 50% - 238px) 258px of 8px cw,
      hline to max(12px, 50% - 438px),
      arc to max(4px, 50% - 446px) 250px of 8px cw,
      vline to 44px, hline to 0, close)}
    .flag:has(.pjx[open]) .pjd{border-radius:0 0 8px 8px}
  }
  .flag:has(.pjx[open]) .pjd::before,.flag:has(.pjx[open]) .pjd::after{content:"";position:absolute;top:-1px;height:1px;width:100vw;background:var(--line)}
  .flag:has(.pjx[open]) .pjd::before{right:100%}
  .flag:has(.pjx[open]) .pjd::after{left:100%}
  .flag:has(.pjx[open]) .pjd a{font:700 11px/1 var(--sysFont);letter-spacing:.12em;text-transform:uppercase;
    color:var(--flagink);text-decoration:none;padding:13px 0;text-align:left}
  .flag:has(.pjx[open]) .pjd a:not(.on):hover{color:var(--ink)}   /* same move as the rhs links */
  .flag:has(.pjx[open]) .pjd a.on{color:var(--accent);display:flex;align-items:center;gap:8px;justify-content:flex-start}
  .flag:has(.pjx[open]) .pjd a.on::after{content:"";width:9px;height:5px;margin-top:-3px;   /* tick rides the name's right here */
    border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
  @starting-style{
    .flag:has(.pjx[open]) .pjd{opacity:0;transform:translateY(-6px)}
  }
}
@media(max-width:480px){
  .flag:has(.bgr){height:calc(44px + var(--sat));padding:var(--sat) 16px 0;--mnavH:296px;   /* the design constant: bar 44 + air 16 + 5 borderless rows at 44pt + floor 16. ONE edge inset for bar and drawer: 16, sitting a touch inside the body's 22 by intent. --sat rides on top everywhere, so the glass owns the status area */
    background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
  .flag:has(.bgr)::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(44px + var(--sat));z-index:-2;
    background:var(--paperT);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);transition:height .28s ease}
  .flag:has(.bgr[open])::before{height:calc(var(--mnavH) + var(--sat))}
  /* HOME rides the bar, left, in line with the trigger: a plain link to
     home; the project name keeps the drawer. Full-height target, hit
     padding refunded. */
  .flag:has(.bgr) .navhome{grid-column:1;grid-row:1;justify-self:start;display:inline-flex;align-items:center;
    height:44px;padding:0 12px;margin-left:-12px}
  /* the project name IS the trigger: chevron left of it, right corner of
     the bar, full-height target. fvwrap and its steppers rest on mobile. */
  .flag:has(.bgr) .fvwrap{display:none}
  .flag .bgr{display:block;grid-column:3;grid-row:1;justify-self:end}
  .flag .bgr summary{list-style:none;cursor:pointer;color:var(--flagink);
    display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 12px;margin-right:-12px;
    font:700 11px/1 var(--sysFont);letter-spacing:.12em;text-transform:uppercase}
  .flag .bgr summary::-webkit-details-marker{display:none}
  /* home: trigger LEFT, and its chevron rides RIGHT of the word */
  .flag.bare .bgr{grid-column:1;justify-self:start}
  .flag.bare .bgr summary{margin-right:0;margin-left:-12px}
  .flag .bgr summary svg{color:var(--mut);transition:transform .2s ease}
  .flag .bgr[open] summary svg{transform:rotate(180deg)}
  .flag:has(.bgr) .tops{display:none}
  /* home only, drawer state: an explicit grid-column would make the grid
     AREA the abspos panel's containing block and crush it into the right
     track. Mobile-scoped: on desktop the pin must stand. */
  .flag.bare:has(.bgr) .tops{grid-column:auto}
  /* the drawer: bare content, the surface behind it is the ::before above.
     justify-self:stretch undoes the bar state's justify-self:end, which
     would otherwise shrink-wrap the abspos .tops against the right edge. */
  .flag:has(.bgr[open]) .pjd,.flag:has(.bgr[open]) .tops{position:absolute;top:0;z-index:-1;
    height:calc(var(--mnavH) + var(--sat));justify-self:stretch;padding:calc(60px + var(--sat)) 16px 16px;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    transition:opacity .16s ease .08s,transform .2s ease .08s}
  .flag:has(.bgr[open]) .pjd{left:50%;right:0}
  .flag:has(.bgr[open]) .tops{left:0;right:50%}
  /* one type recipe for every row */
  .flag .pjd a,.flag:has(.bgr[open]) .tops a{font:700 12px/1 var(--sysFont);letter-spacing:.12em;text-transform:uppercase;
    color:var(--flagink);text-decoration:none;padding:16px 0}   /* 12 + 32 = 44pt rows; no inline pad, the panel's 22 IS the edge */
  .flag .pjd a{text-align:right}
  .flag .pjd a.on{color:var(--accent);display:flex;align-items:center;justify-content:flex-end;gap:8px}
  .flag .pjd a.on::before{content:"";width:9px;height:5px;margin-top:-3px;   /* the tick: you are here, left of the name */
    border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
  /* left list top-aligned like the projects, reversed: Contact, GitHub,
     LinkedIn, CV (cv last) */
  .flag:has(.bgr[open]) .tops a:nth-of-type(1){order:4}
  .flag:has(.bgr[open]) .tops a:nth-of-type(2){order:3}
  .flag:has(.bgr[open]) .tops a:nth-of-type(3){order:2}
  .flag:has(.bgr[open]) .tops a:nth-of-type(4){order:1}
  .flag:has(.bgr[open]) .tops .thsw{order:5;align-self:start;margin-top:-6px}   /* bottom of the pill on the bottom of the last project row (measured); the gap pays for the rows above it, so a link added or removed moves it by one 44pt row */
  .flag:has(.bgr[open]) .tops .thsw button{font-size:11px;padding:14px 16px}   /* 44pt with the pill's own chrome */
  .flag:has(.bgr[open]) .tops .thsw button.ic{width:48px;height:auto}
  .flag:has(.bgr[open]) .tops .thsw button.ic svg{width:16px;height:16px}
  /* entry only: a closed drawer unrenders, so there is nothing to animate out */
  @starting-style{
    .flag:has(.bgr[open]) .pjd,.flag:has(.bgr[open]) .tops{opacity:0;transform:translateY(-12px)}
  }
}

/* home: same component, chrome removed. The right nav keeps column 3, so it
   sits exactly where it sits on every other page. */
.flag.bare{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0}   /* home: no veil, no stroke */
.flag.bare .tops{grid-column:3}
.flag.bare .navhome,.flag.bare .fv,.flag.bare .fvwrap{display:none}

/* ----------------------------------------------------------------
   HOME | PROJECT v  (2026-09-21, every case page)
   Home and the project dropdown read as one group on the left, a thin
   divider between them; the steppers are gone and the right-hand links
   stay. --pjxL is the trigger's left edge: the page script sets it from
   Home's real width, 96px until it runs. The panel and the veil's outline
   hang off it, so they move with it (panel = trigger - 28 pad, 216 wide).
   ---------------------------------------------------------------- */
.flag,.flag *,.flag *::before,.flag *::after{box-sizing:border-box}
@media(min-width:481px){
  .flag:has(.pjx){--pjxL:96px}
  .flag:has(.pjx) .navhome::after{content:"";display:inline-block;width:1px;height:12px;margin-left:16px;vertical-align:-2px;background:var(--ctlbd,var(--line))}
  .flag .pjx{left:var(--pjxL)}
  .flag:has(.pjx[open]) .pjd{left:calc(var(--pjxL) - 28px)}
  .flag:has(.pjx[open])::before{clip-path:polygon(0 0,100% 0,100% 44px,calc(var(--pjxL) + 188px) 44px,calc(var(--pjxL) + 188px) 258px,calc(var(--pjxL) - 28px) 258px,calc(var(--pjxL) - 28px) 44px,0 44px)}
  @supports (clip-path: shape(from 0 0, close)) {
    .flag:has(.pjx[open])::before{clip-path:shape(from 0 0,hline to 100%,vline to 44px,hline to calc(var(--pjxL) + 188px),vline to 250px,arc to calc(var(--pjxL) + 180px) 258px of 8px cw,hline to calc(var(--pjxL) - 20px),arc to calc(var(--pjxL) - 28px) 250px of 8px cw,vline to 44px,hline to 0,close)}
  }
}