/* GLOBAL TIME TOOLS, REDESIGN, STAGING ON ottupdates.co.in
   Built to the reference sheet in /root/Testing/Redesign, 2026-09-11.
   Nothing here is live: every page carries noindex until he approves it.

   The shell is a fixed sidebar, a search bar and a three column body that
   collapses to one on a phone. Colour is the site's own green, not the app's. */

:root{
  --bg:#F6F8F7;
  --surface:#FFFFFF;
  --sunk:#EFF3F1;
  --ink:#0F1C17;
  --ink-2:#33443C;
  /* AA ON EVERY GROUND IT ACTUALLY SITS ON, not on white. At #61756B this
     cleared 4.5:1 on the surface and missed it on the two panels that carry
     most of the muted text: 4.40 on --sunk (every table heading) and 4.33 on
     --brand-tint (every headline note and eyebrow). Measured, not guessed. */
  --muted:#5E7168;
  --line:#DCE5E0;
  --line-strong:#C3D1CA;
  --brand:#0B6B3A;          /* the site's green, unchanged */
  --brand-deep:#075029;
  --brand-tint:#E8F3EC;
  --on-brand:#FFFFFF;          /* text on a filled brand button */
  --up:#127C43;
  --down:#A8321F;
  --shadow-sm:0 1px 2px rgba(15,28,23,.05);
  --shadow:0 2px 4px rgba(15,28,23,.04), 0 12px 28px -18px rgba(15,28,23,.30);
  --radius:14px;
  /* ONE TYPEFACE FOR THE WHOLE SITE. Owner, 2026-09-12: "use unique font for
     entire website". Plus Jakarta Sans carries the headings, the body and every
     figure; --display stays as a name so the rules that mean "this is a
     heading" still read that way, but it is the same family. Two families was
     one more thing that could drift between pages, and it cost a second font
     request on a site that lives on being quick. */
  --sans:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sidebar:248px;
}

/* LIGHT ONLY. Owner, 2026-09-12: "this website will always be light. no dark
   mode". So there is no dark token set, no toggle, and no media query for a
   dark device: a visitor whose phone is set to dark gets the same white site. */
:root{color-scheme:light}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-deep); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0; letter-spacing:-.02em; text-wrap:balance}
img{max-width:100%; height:auto}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}

/* ---------- shell ---------- */
.shell{display:flex; min-height:100vh}

.sidebar{
  width:var(--sidebar); flex:0 0 var(--sidebar);
  background:var(--surface); border-right:1px solid var(--line);
  padding:18px 14px 24px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{display:flex; gap:10px; align-items:center; padding:0 6px 2px; color:var(--ink); text-decoration:none}
.brand:hover{text-decoration:none}
.brand:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:10px}
.brand-mark{width:36px; height:36px; flex:0 0 36px; display:block}
/* The live wordmark: GlobalTimeTools on one line, Time in the brand green (#0B7A55, 5.4:1 on white) */
.brand-name{font-size:18px; font-weight:800; letter-spacing:-.01em; line-height:1.15; white-space:nowrap}
.brand-name em{font-style:normal; color:#0B7A55}
.brand-tag{font-size:11.5px; color:var(--muted); padding:6px 6px 14px}

.nav{display:flex; flex-direction:column; gap:2px}
.nav a, .nav .nav-head{
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px;
  color:var(--ink-2); font-size:14px; font-weight:500; text-decoration:none;
}
.nav a:hover, .nav .nav-head:hover{background:var(--sunk); color:var(--ink)}
.nav a[aria-current="page"]{background:var(--brand-tint); color:var(--brand-deep); font-weight:600}
.nav svg{flex:0 0 18px; margin:0 2px; color:currentColor}
/* Owner, 2026-09-13: icons "in menus" like the rest of the site. The menu rows
   carry the site's own 3D icons at 22px; the line icons below the divider keep a
   22px slot so every label starts on the same line. */
.nav .nav-ico{flex:0 0 22px; width:22px; height:22px; display:block}
.nav-sep{height:1px; background:var(--line); margin:12px 6px}

.tipcard{
  margin:14px 6px 0; padding:12px 13px; border-radius:12px;
  background:var(--brand-tint); color:var(--brand-deep);
  font-size:12.5px; line-height:1.45; display:flex; gap:9px; align-items:flex-start;
}

/* ---------- main ---------- */
.main{flex:1; min-width:0; display:flex; flex-direction:column}

.topbar{
  display:flex; align-items:center; gap:12px;
  padding:14px 22px; border-bottom:1px solid var(--line); background:var(--surface);
  position:sticky; top:0; z-index:20;
}
/* SPECIFICITY, NOT ORDER OF INTENT. `.iconbtn{display:grid}` is declared below
   this and carries the same weight, so a plain `.menu-btn{display:none}` lost
   and the menu button sat on the desktop header. Scoped to the bar it lives in,
   which outranks the single class. */
.topbar .menu-btn{display:none}
/* flex:1 ALONE IS NOT SHRINKABLE. A flex item's default min-width is auto, so
   the field kept its content width and shoved the theme button off the screen:
   14px of sideways scroll at 360, 54px at 320. min-width:0 is the fix, and the
   only reason it was caught is that the check measures the document rather than
   trusting the media queries. */
.search{
  flex:1 1 0; min-width:0; max-width:520px; display:flex; align-items:center; gap:9px;
  background:var(--sunk); border:1px solid var(--line); border-radius:11px;
  padding:0 12px; min-height:40px;
}
.search input{
  flex:1; min-width:0; border:0; background:transparent; color:var(--ink);
  font:inherit; font-size:14px; padding:9px 0; outline:none;
}
.kbd{
  font-size:11px; color:var(--muted); border:1px solid var(--line-strong);
  border-radius:6px; padding:2px 6px; white-space:nowrap;
}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:10px; flex:0 0 auto}
.iconbtn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); display:grid; place-items:center; cursor:pointer;
}
.iconbtn:hover{background:var(--sunk)}

.page{padding:22px; display:flex; flex-direction:column; gap:26px}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden; border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(135deg, var(--brand-tint) 0%, var(--surface) 62%);
  padding:34px 32px; box-shadow:var(--shadow-sm);
}
.hero-eyebrow{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-deep); font-weight:600}
.hero h1{font-size:clamp(26px,4.2vw,40px); line-height:1.1; margin:12px 0 0; max-width:16ch}
.hero p{margin:14px 0 0; color:var(--ink-2); max-width:52ch; font-size:15.5px}
/* The painted hero he exported. It is decorative, so it is empty alt text and
   it never carries meaning the words do not already carry. */
/* THE TEXT KEEPS 500px AND THE PICTURE GETS THE REST, never more. Until 2026-09-13
   the text reserved 34% while the picture took 52%, so they overlapped: invisible
   with a faded landscape, and the globe sat on the headline once the picture had
   solid objects in it. Capped at 760px, the picture's own 2.4:1 at 316px tall. */
.hero{padding-right:min(calc(100% - 500px), 760px)}
.hero-art{
  position:absolute; right:0; top:0; bottom:0; width:min(calc(100% - 500px), 760px); height:100%;
  /* Full height of the panel: at its natural 2.4:1 the picture stopped 58px short
     and left an edge under it. Anchored right, so cover trims the plain left side,
     never the cards on the right (2026-09-13). */
  object-fit:cover; object-position:right center; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 22%);
  mask-image:linear-gradient(to right, transparent, #000 22%);
}
/* Under about 1240px the picture's box is narrower than 1.4:1 and cover cuts the
   calculator and coins in half at its left edge (seen at 1200): the words win. */
@media (max-width:1240px){ .hero{padding-right:32px} .hero-art{display:none} }
.btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  background:var(--brand); color:#fff; border:0; border-radius:11px;
  padding:12px 20px; font-size:14.5px; font-weight:600; cursor:pointer; text-decoration:none;
}
.btn:hover{background:var(--brand-deep); text-decoration:none}
/* THE TEXT COLOUR IS A TOKEN, NOT A SELECTOR FIGHT.
   It used to be set by `:root:not([data-theme="light"]) .btn`, which scores
   0,3,0 and beat `.btn.ghost` at 0,2,0. So every ghost button rendered white on
   white: Reset, Download CSV and all six scenario buttons were blank boxes on
   the first tool page, and no layout check catches that because nothing is
   clipped and nothing overflows. One token, set per theme, and both button
   kinds are plain single-class rules that read in the order they are written. */
.btn{color:var(--on-brand)}
.btn.ghost{color:var(--ink-2)}

/* ---------- facts strip ---------- */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px}
.fact{display:flex; gap:11px; align-items:center; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px}
.fact b{display:block; font-size:16px; line-height:1.2}
.fact span{font-size:12px; color:var(--muted)}

/* ---------- a colour per tool family ----------
   Owner, 2026-09-11: *"You can pick the best colors for each tool. I only want
   the dashboard to look like reference images."* So the shell stays the site's
   green and every family carries its own hue, measured against both grounds.
   The hue says what KIND of tool it is before the label is read, which is the
   one thing 48 tools in a grid need.
   Each pair is a tint for the card and a deeper ink for the icon and the arrow:
   the tint never carries text, the ink never carries a background. */
.g-markets  { --tint:#E9F2FF; --tone:#12508F; }
.g-time     { --tint:#EAF1FE; --tone:#2B4EA8; }
.g-money    { --tint:#E9F6EE; --tone:#0B6B3A; }
.g-tax      { --tint:#FFF2E4; --tone:#95500B; }
.g-everyday { --tint:#F1EEFB; --tone:#5A3EA8; }
.g-pdf      { --tint:#FDEAEA; --tone:#A1281F; }
.g-image    { --tint:#FCEEF7; --tone:#93276B; }

.tool[class*="g-"]{ background:var(--tint); border-color:transparent; }
.tool[class*="g-"] .tool-ico{ background:var(--surface); color:var(--tone); }
.tool[class*="g-"] .go{ color:var(--tone); border-color:var(--line); }
.tool[class*="g-"] h3{ color:var(--tone); }
.tool[class*="g-"] p{ color:var(--ink-2); }
.cat[class*="g-"] .cat-ico{ color:var(--tone); }
.cat-ico svg, .tool-ico svg{display:block}

/* ---------- body columns ---------- */
.cols{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start}
.col-main{display:flex; flex-direction:column; gap:26px; min-width:0}
.rail{display:flex; flex-direction:column; gap:16px; position:sticky; top:78px}

.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px}
.sec-head h2{font-size:19px}
.sec-head a{font-size:13px; font-weight:600}

/* FOUR ACROSS, LIKE THE SHEET. `auto-fill` put six uneven cards in a row on a
   wide screen, which is the thing he said matched nothing: the reference is a
   tidy four by two block. */
.tools{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
@media (max-width:1320px){ .tools{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:980px){ .tools{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .tools{grid-template-columns:minmax(0,1fr)} }
.tool{
  position:relative; display:flex; flex-direction:column; gap:7px;
  padding:18px 17px 48px; border-radius:18px; border:1px solid var(--line); min-height:196px;
  background:var(--surface); box-shadow:var(--shadow-sm); color:inherit; text-decoration:none;
}
.tool:hover{border-color:var(--line-strong); box-shadow:var(--shadow); text-decoration:none}
/* The sheet's icon is a big soft tile, not a bullet. 56px with the glyph at 30
   is the closest this gets without shipping 48 illustrations. */
/* HIS ICONS COME WITH THEIR OWN TILE, so the card must not draw a second one
   behind them. A white tile under an icon that already has a coloured tile is
   the frame-inside-a-frame look, and it was the first thing wrong when the real
   artwork went in. */
.tool-ico{
  width:56px; height:56px; display:grid; place-items:center;
  font-size:30px; line-height:1;
}
.tool-ico img{display:block; width:56px; height:56px}
.tool-ico:has(svg){background:var(--surface); border-radius:18px; box-shadow:var(--shadow-sm); width:62px; height:62px}
.tool h3{font-size:15.5px; line-height:1.28; padding-right:26px; margin-top:2px}
.tool p{margin:0; font-size:13px; color:var(--ink-2); line-height:1.5}
.tool .go{
  position:absolute; right:12px; bottom:12px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--brand-deep);
}

/* The sheet puts four category chips on a row, then four more. */
.cats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
@media (max-width:1320px){ .cats{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:980px){ .cats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .cats{grid-template-columns:minmax(0,1fr)} }
.cat{
  display:flex; gap:11px; align-items:center; padding:12px 13px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); color:inherit; text-decoration:none;
}
.cat:hover{border-color:var(--line-strong); text-decoration:none}
.cat b{display:block; font-size:13.5px}
.cat span{font-size:11.5px; color:var(--muted)}
.cat-ico{width:34px; height:34px; display:grid; place-items:center; font-size:17px; flex:0 0 34px}
.cat-ico img{display:block; width:34px; height:34px}

/* ---------- rail cards ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:15px; box-shadow:var(--shadow-sm)}
.card h3{font-size:13px; letter-spacing:.02em}
.clock-date{font-size:12.5px; color:var(--muted)}
.clock-time{font-size:30px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin:4px 0 2px}
.clock-where{font-size:12.5px; color:var(--muted)}
.rows{display:flex; flex-direction:column; gap:9px; margin-top:11px}
.row{display:flex; align-items:baseline; gap:8px; font-size:13px}
.row .n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
.row .v{font-variant-numeric:tabular-nums; font-weight:600}
.row .d{font-size:12px; font-variant-numeric:tabular-nums; min-width:58px; text-align:right}
.up{color:var(--up)} .down{color:var(--down)}
.quicklist{display:flex; flex-direction:column; gap:2px; margin-top:8px}
.quicklist a{display:flex; align-items:center; gap:9px; padding:8px 6px; border-radius:9px; color:var(--ink-2); font-size:13px}
.quicklist a:hover{background:var(--sunk); text-decoration:none; color:var(--ink)}
.quicklist .chev{margin-left:auto; color:var(--muted)}
.quicklist .q-ico{flex:0 0 24px; width:24px; height:24px; display:grid; place-items:center}
.quicklist .q-ico img, .quicklist .q-ico svg{display:block; width:24px; height:24px}

.featured{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.feat{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:16px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-sm)}
.feat h3{font-size:15px}
.feat .btn{margin-top:auto; align-self:flex-start}
.feat p{margin:0; font-size:13px; color:var(--muted)}
.tag{align-self:flex-start; font-size:11px; font-weight:700; color:var(--brand-deep); background:var(--brand-tint); border-radius:999px; padding:3px 9px}

.cta{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--brand-tint); padding:18px 20px;
}
.cta h2{font-size:17px; color:var(--brand-deep)}
.cta p{margin:4px 0 0; font-size:13.5px; color:var(--ink-2)}
.cta .btn{margin:0 0 0 auto}

footer.site{border-top:1px solid var(--line); padding:18px 22px 40px; color:var(--muted); font-size:12.5px; display:flex; flex-wrap:wrap; gap:14px}
footer.site a{color:var(--muted)}

/* the staging badge: this build must never be mistaken for the live site */
.staging{
  background:#7A3E00; color:#FFF3E2; font-size:12px; font-weight:600;
  padding:6px 22px; letter-spacing:.02em;
}

/* ---------- phone ---------- */
@media (max-width: 1080px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .rail{position:static; flex-direction:row; flex-wrap:wrap}
  .rail>*{flex:1 1 260px}
}
@media (max-width: 860px){
  .sidebar{
    position:fixed; left:0; top:0; z-index:40; transform:translateX(-100%);
    transition:transform .22s ease; box-shadow:var(--shadow);
  }
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open::after{content:""; position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:30}
  .topbar .menu-btn{display:grid}
  .page{padding:16px}
  .hero{padding:24px 20px}
  .hero-art{display:none}
  .topbar{padding:12px 12px; gap:8px}
  .kbd{display:none}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }


/* THE HIDDEN ATTRIBUTE MUST WIN. The browser's own [hidden]{display:none} is
   the weakest rule there is, so any class that sets `display` beats it: the
   preferences menu below sets display:flex and sat OPEN on every page, over the
   heading, from the day it was added, because `menu.hidden = true` did nothing. */
[hidden]{display:none !important}

/* PREFERENCES, in the top bar, as the live site has had all along. */
.prefs{position:relative}
.prefs-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:40; width:230px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px;
  box-shadow:0 2px 6px rgba(15,28,23,.06), 0 24px 48px -24px rgba(15,28,23,.45);
  display:flex; flex-direction:column; gap:12px;
}
.prefs-menu label{display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:600; color:var(--muted)}
.prefs-menu select{
  font:inherit; font-size:14px; font-weight:600; padding:9px 11px; min-height:42px;
  border:1px solid var(--line-strong); border-radius:10px; background:var(--bg); color:var(--ink);
}
.prefs-menu select:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
@media (max-width:520px){ .prefs-menu{width:min(84vw, 230px)} }

/* ---------------------------------------------------------------- SUBMENUS */
/* Owner, 2026-09-13: "Need submenus for main menus." A family opens to its tools
   (app.js). The sidebar scrolls on its own, because seven open families are
   taller than any laptop screen. */
.sidebar{overflow-y:auto; overscroll-behavior:contain}
.nav .nav-head{font:inherit; width:100%; border:0; background:none; cursor:pointer; text-align:left}
.nav .nav-head .chev{margin-left:auto; flex:0 0 14px; color:var(--muted); transition:transform .18s}
.nav .nav-head[aria-expanded="true"] .chev{transform:rotate(90deg)}
.nav .nav-head.current{background:var(--brand-tint); color:var(--brand-deep); font-weight:600}
.nav .nav-head:focus-visible, .nav-sub a:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
.nav-sub{display:flex; flex-direction:column; gap:1px; margin:2px 0 8px 21px; padding-left:10px; border-left:1px solid var(--line)}
.nav-sub[hidden]{display:none}
.nav .nav-sub a{min-height:36px; padding:7px 10px; font-size:13px; line-height:1.35; color:var(--ink-2)}
.nav .nav-sub a[aria-current="page"]{background:var(--brand-tint); color:var(--brand-deep); font-weight:600}
.prefs-note{margin:2px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted); max-width:220px}

/* ------------------------------------------------------- ALL TOOLS (HOME) */
.all-tools{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(250px,100%),1fr)); gap:14px}
.all-group{scroll-margin-top:90px; padding:16px 16px 12px; border-radius:16px; background:var(--surface); border:1px solid var(--line)}
.all-group:target{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
.all-group h3{display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:15px}
.all-links{display:flex; flex-direction:column}
.all-links a{display:flex; align-items:center; min-height:40px; padding:6px 8px; border-radius:9px; font-size:13.5px; color:var(--ink-2)}
.all-links a:hover{background:var(--sunk); color:var(--ink); text-decoration:none}

/* ---- Carried from the live site for launch (2026-09-13). In app.css, not
   tool.css, because the home page loads only this sheet and carries both. ---- */
/* THE CONSENT NOTICE: the live site's words, dismissed once per device. */
.cookie-bar{position:fixed; left:14px; right:14px; bottom:14px; z-index:60; max-width:540px; margin:0 auto; padding:16px 18px;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; border-radius:16px; color:#fff;
  background:#16211C; box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.cookie-bar p{flex:1 1 260px; margin:0; font-size:13.5px; line-height:1.55; color:#DCE7E1}
.cookie-bar a{color:#A8E3C8; text-decoration:underline}
.cookie-bar .btn{margin:0; background:#fff; color:#16211C}
.cookie-bar .btn:hover{background:#E4F2EA; color:#16211C}

/* THE FOOTER: the links the live footer carries, and its legal line. */
footer.site{display:flex; flex-direction:column; gap:10px}
footer.site .f-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px}
footer.site .f-links{display:flex; flex-wrap:wrap; gap:4px 16px}
footer.site .f-links a{display:inline-flex; align-items:center; min-height:32px}
footer.site .f-staging{margin-left:auto}
footer.site .f-legal{margin:0; max-width:110ch; font-size:12px; line-height:1.6; color:var(--ink-2)}
footer.site .f-legal a{color:var(--ink-2); text-decoration:underline}
/* The consent notice sits over the bottom of the screen. With the phone menu
   open it covered the lower families, so a tap on PDF Tools landed on the
   notice instead (found 2026-09-13 by tests/nav-audit.mjs). It steps aside while
   the menu is open and comes back when it closes. */
body.nav-open .cookie-bar{display:none}