@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap');

/* ==========================================================================
   olimn.com — one stylesheet, loaded once by base.html
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset and base elements
   3.  Layout primitives
   4.  Site header
   5.  Site footer
   6.  Components
   7.  Landing gate            (index.html)
   8.  Gallery                 (main/*)
   9.  Central                 (central/*)
   10. Responsive
   11. Accessibility and motion
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */

:root {
  /* Palette. Derived from the network renderer so the site and the graph
     read as one system. */
  --paper:        #fbfbfa;
  --paper-sunk:   #f2f3f1;
  --ink:          #16171a;
  --ink-soft:     #5c6169;
  --rule:         #dcded9;
  --rule-strong:  #b9bdb6;

  --indigo:       #534ab7;   /* links, primary actions, local_area nodes */
  --indigo-deep:  #3a3286;
  --green:        #0f6e56;   /* healthy state, lan nodes */
  --blue:         #185fa5;   /* host nodes */
  --amber:        #ba7517;   /* attention, agent nodes */

  /* Type */
  --sans:  "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.375rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.25rem;
  --t-3xl:  3.5rem;

  /* Space */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* Frame */
  --header-h:  56px;
  --measure:   66ch;      /* reading width for serif prose */
  --shell:     920px;     /* page width */
  --radius:    3px;
}


/* 2. Reset and base elements
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p  { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--indigo);
  text-decoration: none;
  border-bottom: 1px solid rgba(83, 74, 183, 0.35);
}
a:hover { border-bottom-color: var(--indigo); }

img { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-7) 0;
}

button { font: inherit; }


/* 3. Layout primitives
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.page {
  flex: 1;
  padding: var(--s-8) 0 var(--s-9);
}

/* Pages that fill the viewport instead of scrolling (workspace, login, gate) */
.is-app .page,
.is-gate .page { padding: 0; }

.page-head {
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}

.page-head h1 {
  font-size: var(--t-2xl);
}

.page-head .lede {
  margin: var(--s-2) 0 0;
  max-width: 52ch;
  color: var(--ink-soft);
}

.prose {
  font-family: var(--serif);
  font-size: var(--t-md);
  line-height: 1.7;
  max-width: var(--measure);
}

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-4);
  font-size: var(--t-sm);
}

.subnav a { color: var(--ink-soft); border-bottom-color: var(--rule-strong); }
.subnav a:hover { color: var(--indigo); border-bottom-color: var(--indigo); }

.prose h2 { font-size: var(--t-lg); margin: var(--s-7) 0 var(--s-3); }
.prose h3 { font-size: var(--t-md); margin: var(--s-6) 0 var(--s-2); }
.prose img { margin: var(--s-5) 0; border: 1px solid var(--rule); }

.prose code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 1px 5px;
  border-radius: var(--radius);
  background: var(--paper-sunk);
}


/* 4. Site header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 0;
}

.brand-node {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--indigo);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.site-nav a {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  border: 0;
  padding: var(--s-1) 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: var(--ink); }

.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--indigo);
}


/* 5. Site footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: var(--s-5) 0;
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

.site-footer .shell {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.is-app .site-footer { display: none; }

/* The workspace sizes itself to the viewport, so the page never scrolls. */
.is-app { overflow: hidden; }


/* 6. Components
   ========================================================================== */

/* Buttons ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 9px var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
}

.btn:hover { border-color: var(--ink-soft); }

.btn-primary {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}

.btn-primary:hover { background: var(--indigo-deep); border-color: var(--indigo-deep); }

.btn-block { width: 100%; }

/* Fields ------------------------------------------------------------------- */

.field { margin-bottom: var(--s-4); }

.field label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 500;
}

.field input {
  width: 100%;
  padding: 10px var(--s-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
}

.field input:focus {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
  border-color: var(--indigo);
}

.note {
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

.error {
  margin-bottom: var(--s-4);
  padding: var(--s-3);
  border-left: 3px solid var(--amber);
  background: var(--paper-sunk);
  font-size: var(--t-sm);
}

/* Metadata (dates, host names, statuses — real data, set in mono) ----------- */

.meta {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* Index rows — used for the gallery menu and the project list --------------- */

.rows { border-top: 1px solid var(--rule); }

.row {
  display: block;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
}

a.row { border-bottom: 1px solid var(--rule); }
a.row:hover { background: var(--paper-sunk); }

.row h2 {
  font-size: var(--t-lg);
  margin-bottom: var(--s-2);
}

.row p { color: var(--ink-soft); max-width: 60ch; }

.row-links {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}


/* 7. Landing gate (index.html)
   ========================================================================== */

.is-gate .page {
  display: flex;
  align-items: center;
}

.gate {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-7);
  width: 100%;
  padding: var(--s-8) 0;
}

.door {
  display: block;
  border: 0;
  color: inherit;
  padding: var(--s-4) 0;
}

.door:nth-of-type(1) { text-align: right; }

.door-name {
  display: block;
  font-size: var(--t-3xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.door-note {
  display: block;
  margin-top: var(--s-3);
  max-width: 26ch;
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

.door:nth-of-type(1) .door-note { margin-left: auto; }

.door:hover .door-name { color: var(--indigo); }
.door:hover .door-node { fill: var(--indigo); }

.gate-link { display: block; }
.gate-link .door-node { fill: var(--rule-strong); }
.gate-link line { stroke: var(--rule-strong); stroke-width: 1; }


/* 8. Gallery (main/*)
   ========================================================================== */

/* Blog --------------------------------------------------------------------- */

.entry {
  padding: var(--s-8) 0;
  border-bottom: 1px solid var(--rule);
}

.entry:first-of-type { padding-top: var(--s-2); }
.entry:last-of-type { border-bottom: 0; }

.entry-date { display: block; margin-bottom: var(--s-3); }

.entry h2 {
  font-family: var(--serif);
  font-size: var(--t-xl);
  margin-bottom: var(--s-5);
  max-width: 24ch;
}

.entry h3 {
  font-family: var(--serif);
  font-size: var(--t-md);
  font-style: italic;
  font-weight: 400;
  margin: var(--s-6) 0 var(--s-3);
}

/* Poems and other line-broken writing */
.verse {
  font-family: var(--serif);
  font-size: var(--t-md);
  line-height: 1.85;
  max-width: 46ch;
  margin: 0 0 var(--s-5);
}

.verse em { color: var(--ink-soft); }

/* Portfolio ---------------------------------------------------------------- */

.project h2 { font-size: var(--t-lg); }

/* About -------------------------------------------------------------------- */

.about-lede {
  font-family: var(--serif);
  font-size: var(--t-lg);
  line-height: 1.5;
  max-width: 34ch;
  margin-bottom: var(--s-6);
}


/* 9. Central (central/*)
   ========================================================================== */

/* Login -------------------------------------------------------------------- */

.is-gate .signin { width: 100%; }

.signin-card {
  max-width: 340px;
  margin: 0 auto;
  padding: var(--s-7) 0;
}

.signin-card h1 {
  font-size: var(--t-xl);
  margin-bottom: var(--s-2);
}

.signin-card .lede {
  margin-bottom: var(--s-6);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

.signin-card .note { margin-top: var(--s-5); }

/* Workspace ---------------------------------------------------------------- */

.workspace {
  display: grid;
  grid-template-rows: auto 1fr auto;   /* bar / canvas / legend */
  height: calc(100dvh - var(--header-h));
}

.workspace-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  min-height: 44px;
}

.workspace-bar h1 {
  font-size: var(--t-sm);
  font-weight: 600;
}

.workspace-tools {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-left: auto;
}

.workspace-tools .btn { padding: 5px var(--s-3); }

#status { max-width: 46ch; white-space: pre-line; }

.canvas {
  position: relative;
  overflow: hidden;
  background: var(--paper-sunk);
}

/* Cytoscape measures its container, so pin it rather than trusting % height. */
#cy {
  position: absolute;
  inset: 0;
  display: block;
}

.empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-6);
  text-align: center;
  color: var(--ink-soft);
}

.empty h2 {
  font-size: var(--t-md);
  color: var(--ink);
}

.empty p { max-width: 40ch; font-size: var(--t-sm); }

#tooltip {
  position: fixed;
  z-index: 30;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.5;
  white-space: pre;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

/* Legend for the node colours used by the renderer */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-5);
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs);
  color: var(--ink-soft);
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rule-strong);
}

.legend .k-area  { background: var(--indigo); }
.legend .k-lan   { background: var(--green); }
.legend .k-host  { background: var(--blue); }
.legend .k-agent { background: var(--amber); }


/* 10. Responsive
   ========================================================================== */

@media (max-width: 720px) {
  :root {
    --t-2xl: 1.875rem;
    --t-3xl: 2.5rem;
  }

  .page { padding: var(--s-6) 0 var(--s-8); }

  .gate {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    text-align: left;
  }

  .door:nth-of-type(1) { text-align: left; }
  .door:nth-of-type(1) .door-note { margin-left: 0; }

  .gate-link { display: none; }

  .gate-link + .door {
    padding-top: var(--s-6);
    border-top: 1px solid var(--rule);
  }

  .entry { padding: var(--s-6) 0; }

  .workspace-tools { gap: var(--s-2); }
}

@media (max-width: 460px) {
  .site-nav { gap: var(--s-4); }
  .workspace-bar h1 { display: none; }
}


/* 11. Accessibility and motion
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: var(--radius);
  z-index: 40;
}

.skip-link:focus { left: var(--s-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}