/* Copyright (c) 2026 Guilherme Silva. All rights reserved. */
/* =========================================================================
   Structure: geometry, typography, layout. No colours here; see skin.css.
   Sizes follow GitHub's Primer: 14px body, 32px controls, 48px tab row,
   20px labels, 16px icons, 6px radius.
   ========================================================================= */

/* 0. Web font: Mona Sans, GitHub's typeface (SIL Open Font License, see
   fonts/OFL.txt), variable in weight and optical size, upright only. */
@font-face{
  font-family:"Mona Sans";
  src:url("fonts/MonaSansVF.woff2") format("woff2");
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}

/* 1. Tokens */
:root{
  --font-sans:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --text-body:14px; --text-small:12px; --text-title:20px; --line-body:1.5;
  --control-h:32px; --tab-h:48px; --label-h:20px; --icon:16px; --radius:6px;
  --touch:48px;   /* touch target, Material and Android: 48dp */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --page-max:1012px; --gutter:16px;
}

/* 2. Base */
*{box-sizing:border-box}
html,body{height:100%}
/* 320px is the page's floor, Primer's smallest breakpoint: narrower than
   that it keeps 320 and scrolls sideways rather than breaking its rows. */
body{margin:0;min-width:320px;overflow:hidden;font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--line-body)}
button,input{font:inherit}
svg{width:var(--icon);height:var(--icon);flex:none}
:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}
h1,h2,p,ol{margin:0}
ol{padding:0;list-style:none}

/* 3. Layout: an application shell. The header (tabs + toolbar) is a fixed
   region; only the content region scrolls, so nothing above the list can
   move, whatever the list does. */
.app{height:100%;display:grid;grid-template-rows:auto 1fr}
.container{max-width:calc(var(--page-max) + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.app-header{padding-top:var(--space-4);padding-bottom:var(--space-2)}
.app-header .container{display:grid;gap:var(--space-2)}
/* The content region scrolls; its scrollbar sits at the window edge and its
   gutter is always reserved, so filtering never shifts the content sideways. */
.app-content{overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable both-edges;scrollbar-width:thin;padding-top:var(--space-2);padding-bottom:48px}

/* 4. Components */
/* 4.1 Tab bar, as GitHub's repository UnderlineNav. */
.tabs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);border-bottom-width:1px;border-bottom-style:solid}
.tabs-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tab{height:var(--tab-h);padding:0 var(--space-2);margin-bottom:-1px;border:0;border-bottom-width:2px;border-bottom-style:solid;border-radius:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-2);line-height:30px}
/* The visible text and an invisible bold copy share one grid cell, so the
   tab is always as wide as its bold state and neighbours never shift. */
.tab-text{display:inline-grid;line-height:30px}
.tab-text>span,.tab-text::after{grid-area:1/1}
.tab-text::after{content:attr(data-text);font-weight:600;visibility:hidden}

/* 4.2 Profile links, right end of the tab bar. */
.profile-links{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--space-4);align-self:center;padding-right:var(--space-4)}
.profile-links a,.theme,.share{text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-1);line-height:20px;padding:0;border:0;background:none;cursor:pointer}

/* 4.3 Toolbar: title, search, date range. */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.title{font-size:var(--text-title);line-height:1.25;font-weight:600;margin-right:var(--space-2);white-space:nowrap}
.title .login{font-weight:600;white-space:nowrap}   /* the name never breaks, whatever the width */
.input{height:var(--control-h);padding:5px var(--space-3);border-width:1px;border-style:solid;border-radius:var(--radius);line-height:20px}
.search{flex:1 1 220px;min-width:0}
.date-range{display:flex;align-items:center;gap:var(--space-2)}
.date-range .input{width:10.5em;padding-inline:var(--space-2)}

/* 4.4 Timeline. */
.timeline{display:grid;gap:var(--space-5)}
.month{display:grid;gap:var(--space-2)}
.month-title{font-size:var(--text-body);line-height:20px;font-weight:400}
.entries{border-left-width:2px;border-left-style:solid;margin-left:9px}
.entry{position:relative;display:grid;grid-template-columns:1fr auto auto;gap:var(--space-3);align-items:center;padding:var(--space-2) var(--space-3) var(--space-2) 24px;border-bottom-width:1px;border-bottom-style:solid}
.entry:last-child{border-bottom:0}
/* The marker is GitHub's state icon, sitting on the spine over a canvas
   disc so the line does not cross it. */
.marker{position:absolute;left:-11px;top:10px;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.main{min-width:0;display:grid;gap:2px}
.item{text-decoration:none;font-size:16px;line-height:24px;font-weight:400}
.meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-1);font-size:var(--text-small);line-height:18px}
.repo{text-decoration:none}
.sha{font-family:var(--font-mono)}
.date{font-variant-numeric:tabular-nums}
.anchor{display:inline-flex;opacity:0}
.empty{padding:var(--space-5) 0}

/* 4.5 Status label, as GitHub's State (filled). Advisory severity uses the
   outlined Label with a capital initial, as on a repository's Security tab. */
.status{height:var(--label-h);padding:0 10px;border:0;border-radius:2em;font-size:var(--text-small);line-height:20px;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center}
.status--outline{padding:0 7px;border-width:1px;border-style:solid;line-height:18px;text-transform:capitalize}

/* 4.6 Sign-off. */
.signoff{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-5);font-size:var(--text-small)}
.signoff::before,.signoff::after{content:"";flex:1;border-top-width:1px;border-top-style:solid}
.updated{font-variant-numeric:tabular-nums}

/* 4.7 Tooltip, as Primer's, below its anchor with right edges aligned. */
.tooltipped{position:relative}
.tooltip{visibility:hidden;opacity:0;position:absolute;top:calc(100% + var(--space-1));right:0;padding:var(--space-1) var(--space-2);border-radius:var(--radius);font-size:var(--text-small);line-height:20px;white-space:nowrap;pointer-events:none;z-index:1}

/* 5. States (shape only; colours in skin.css) */
.tab[aria-pressed="true"]{font-weight:600}
.profile-links a:hover,.share--sheet:hover,.repo:hover,.item:hover{text-decoration:underline}
.entry.commits .repo:hover{text-decoration:none}
.entry:target{outline-width:1px;outline-style:solid}
.entry:hover .anchor,.entry:target .anchor,.anchor:focus-visible{opacity:1}
.tooltipped:hover>.tooltip,.tooltipped:focus-visible>.tooltip,.tooltipped.share--copied>.tooltip{visibility:visible;opacity:1;transition:opacity .1s ease-in}

/* 6. Responsive. Below Primer's lg (1012px), where the nav with its
   labelled profile links and the toolbar no longer fit one row each, the
   header is one system: rows one control tall (32px) in aligned columns,
   from the nav to the dates. */
@media (max-width:1011px){
  /* 6.1 Nav: two columns of 32px rows, the second sized by its longest
     label ("Security advisories" with its icon) and the first taking the
     rest, so no label wraps; tabs lose their side padding and keep icon
     tight to label. The profile links weigh less: one row of their icons
     alone at the right, each centred in a 48px touch target, the targets
     side by side. The last target ends 16px inside the frame, so the last
     icon keeps to its right the 32px its siblings keep between them. The
     nav sits 8px inside the frame, as the tabs' own padding does on the
     desktop. 16px shows above the first tab: the 32px tab row has 6px of
     air above its 20px ink. */
  .app-header{padding-top:10px}
  .tabs{display:grid;grid-template-columns:minmax(0,1fr) max-content;grid-auto-rows:auto;align-items:center;gap:0;padding-inline:var(--space-2)}
  .tabs-list{display:contents}
  .tab{height:var(--control-h);margin-bottom:0;padding-inline:0;gap:var(--space-1)}
  .profile-links{grid-column:1/-1;margin-left:0;justify-content:flex-end;gap:0;padding-right:var(--space-2)}
  .profile-links a,.theme,.share{width:var(--touch);height:var(--touch);justify-content:center;gap:0;font-size:0}
  /* Icons alone: tooltips hang from the row's right end, so the longest stays on screen at 320px. */
  .profile-links{position:relative}
  .profile-links .tooltipped{position:static}
  /* 6.2 Toolbar: title centred on its own row (breaking, if it must,
     before the name), then search, then each date on its own 32px row,
     label beside a field that takes the rest. */
  .title{flex-basis:100%;margin-right:0;white-space:normal;text-align:center}
  .search{flex-basis:100%}
  .date-range{flex-basis:100%;display:grid;grid-template-columns:auto 1fr;gap:var(--space-2)}
  .date-range .input{width:auto;min-width:0}
  /* 6.3 Rows without the anchor column; the spine sits closer to the edge. */
  .entry{grid-template-columns:1fr auto;padding-left:20px}
  .entry .anchor{display:none}
}
/* 6.4 Columns grow with the width, each as wide as its longest label and
   the spare width spread between them, so the first label starts at the
   left edge and the last ends at the right edge, where the icon row ends.
   Three columns from 400px; six from 700px, where the six labels (590px)
   keep 16px between them; from 940px the four 48px targets fit beside
   them and join the row, which grows to the desktop's 48px. */
@media (min-width:400px) and (max-width:1011px){
  .tabs{grid-template-columns:repeat(3,max-content);justify-content:space-between}
  /* The two dates share one row from here: label, field, label, field. */
  .date-range{grid-template-columns:auto 1fr auto 1fr}
}
@media (min-width:700px) and (max-width:1011px){
  .tabs{grid-template-columns:repeat(6,max-content)}
  /* The search joins the dates on one row, taking what they leave; the
     title keeps its own row until the desktop puts all three together. */
  .search{flex-basis:220px}
  .date-range{flex:0 0 auto}
}
@media (min-width:940px) and (max-width:1011px){
  .tabs{grid-template-columns:repeat(6,max-content) max-content}
  .tab{height:var(--tab-h);margin-bottom:-1px}
  .profile-links{grid-column:auto}
}