/* ==========================================================================
   Maddie Bhuvan portfolio, Google/Chrome theme
   Shared by every page. Content lives in the HTML files, look lives here.
   ========================================================================== */

:root{
  --g-blue:#4285F4;
  --g-red:#EA4335;
  --g-yellow:#FBBC05;
  --g-green:#34A853;
  --link:#1a0dab;
  --link-hover:#1558d6;
  --text:#202124;
  --text-soft:#4d5156;
  --text-faint:#70757a;
  --line:#dadce0;
  --line-soft:#ebebeb;
  --chip-bg:#f1f3f4;
  --flash:#e8f0fe;
  --font-ui:'Roboto',Arial,sans-serif;
  --font-body:Arial,'Roboto',sans-serif;
  --font-logo:'Poppins','Product Sans',Arial,sans-serif;
  /* Source panel: 380px when it fits, easing down to 300px before anything
     else has to give. */
  --panel-w:clamp(300px, calc(100vw - 980px), 380px);
  /* Left edge shared by the search bar, nav row, results column, and source
     panel in every state. The wordmark never affects it.

     The content block is 652px results + 48px gap + the panel, so centering
     it puts (100vw - 700px - panel) / 2 on each side. The right margin is
     left to fall out of the leftover grid space, which lands on that same
     value, so the gutters read as equal (like Google's).
     The 28px floor matches the right padding, keeping the two sides equal
     down to the compact breakpoint. */
  --results-left:max(28px, calc((100vw - 700px - var(--panel-w)) / 2));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:#fff;color:var(--text);
  font-family:var(--font-body);font-size:15px;line-height:1.58;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:400}
[hidden]{display:none!important}

/* ==========================================================================
   Multi-colour wordmark (letters coloured by js/app.js)
   ========================================================================== */

.wordmark{font-family:var(--font-logo);font-weight:500;letter-spacing:-.03em}

/* ==========================================================================
   Homepage (Google home screen)
   ========================================================================== */

.home-topbar{
  display:flex;justify-content:flex-end;align-items:center;gap:20px;
  padding:16px 26px;font-size:13px;
}
.home-topbar a{color:var(--text);text-decoration:none}
.home-topbar a:hover{text-decoration:underline}
.apps-grid{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#5f6368}
.apps-grid:hover{background:var(--chip-bg)}
.home-avatar{
  width:34px;height:34px;border-radius:50%;background:#e8710a;color:#fff;
  display:flex;align-items:center;justify-content:center;font:500 16px var(--font-ui);
}

/* The homepage fills the viewport and centres its content in whatever space
   the top bar and footer leave over, so it sits true on any screen instead
   of being pushed down by a fixed top padding. dvh keeps it honest on
   mobile, where the browser chrome changes the usable height. */
#view-home{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.home-center{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  width:100%;max-width:720px;margin:0 auto;padding:24px 20px;text-align:center;
}
.home-logo{font-size:clamp(32px,5vw,66px);line-height:1.1}
.home-center .searchbox{width:min(584px,100%)}

/* Search box, shared by homepage and results header */
.searchbox{position:relative;margin:30px auto 0;width:min(584px,100%);text-align:left}
.searchbox-inner{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid #dfe1e5;border-radius:26px;
  min-height:48px;padding:4px 8px 4px 16px;
}
.searchbox:hover .searchbox-inner,
.searchbox.open .searchbox-inner,
.searchbox-inner:focus-within{
  box-shadow:0 1px 6px rgba(32,33,36,.28);border-color:rgba(223,225,229,0);
}
.searchbox.open .searchbox-inner{border-radius:26px 26px 0 0;box-shadow:0 1px 6px rgba(32,33,36,.28)}
.searchbox input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:400 16px var(--font-body);color:var(--text);
}
.sb-icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:#9aa0a6}
.sb-clear{
  flex:0 0 auto;width:28px;height:28px;border:0;background:transparent;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;
}
.sb-clear:hover{background:var(--chip-bg)}
.sb-sep{flex:0 0 auto;width:1px;height:26px;background:#dfe1e5}

.suggestions{
  display:none;position:absolute;top:100%;left:0;right:0;z-index:40;
  background:#fff;border-radius:0 0 26px 26px;
  box-shadow:0 4px 6px rgba(32,33,36,.28);
  padding:6px 0 16px;
}
.searchbox.open .suggestions{display:block}
.suggestions::before{content:"";display:block;height:1px;background:#e8eaed;margin:0 16px 6px}
.suggestion{
  display:flex;align-items:center;gap:14px;
  padding:8px 22px;font-size:16px;color:var(--text);cursor:pointer;
}
.suggestion:hover{background:var(--chip-bg)}
.suggestion .sb-icon{width:20px;height:20px}

/* Shortcut tiles (hidden while the suggestion dropdown is open) */
.shortcuts{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 26px;margin-top:70px}
.home-center:has(.searchbox.open) .shortcuts{visibility:hidden}
.shortcut{width:96px;text-decoration:none;color:var(--text);font-size:13px;text-align:center}
.shortcut .disc{
  width:56px;height:56px;margin:0 auto 8px;border-radius:50%;
  background:var(--chip-bg);display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.shortcut:hover .disc{background:#e8eaed}
.shortcut span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==========================================================================
   Results pages (Google search results look)
   ========================================================================== */

.results-header{
  position:relative;display:flex;align-items:center;gap:26px;
  padding:24px 28px 0 var(--results-left);
}
/* Wordmark floats in the left gutter, centered on the search bar */
.mini-logo{
  position:absolute;left:28px;top:24px;height:44px;
  display:flex;align-items:center;
  font-size:27px;text-decoration:none;line-height:1;white-space:nowrap;
}
.results-header .searchbox{margin:0;flex:0 1 660px}
.sb-fav{
  display:none;flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--chip-bg);align-items:center;justify-content:center;
}
.results-header .searchbox-inner{min-height:44px;box-shadow:0 1px 6px rgba(32,33,36,.18);border-color:transparent}
.header-icons{display:flex;align-items:center;gap:14px;margin-left:auto;flex:0 0 auto}

.results-nav{
  display:flex;gap:26px;align-items:flex-end;
  padding:18px 28px 0 var(--results-left);
  border-bottom:1px solid var(--line-soft);
  font:400 14px var(--font-ui);color:#5f6368;
  overflow-x:auto;scrollbar-width:none;
}
.results-nav::-webkit-scrollbar{display:none}
.results-nav a{
  display:flex;align-items:center;gap:6px;
  padding:0 2px 10px;text-decoration:none;color:#5f6368;white-space:nowrap;
  border-bottom:3px solid transparent;
}
.results-nav a.on{color:#202124;font-weight:500;border-bottom-color:#202124}
.results-nav a:not(.on):hover{color:var(--text)}

.results-count{margin:14px 28px 0 var(--results-left);font-size:13px;color:var(--text-faint)}

/* Correction header: "These are results for <question>" above a free-typed
   query's results, with what was actually typed on the line below. */
.did-you-mean{margin:12px 28px 0 var(--results-left);max-width:652px}
.did-you-mean p{margin:0}
.did-you-mean a{color:var(--link);text-decoration:none}
.did-you-mean a:hover{text-decoration:underline}
.dym-fix{font:italic 700 16px var(--font-body)}
/* Plain text, not a link: it describes the search rather than offering one */
.dym-instead{margin-top:3px;font-size:14px;color:var(--text-soft)}
.dym-instead b{color:var(--text)}

/* Two columns: capped results column left, source panel + knowledge panel
   right. Both top cells (AI Overview | sources) start the grid. */
.results-layout{
  display:grid;column-gap:48px;align-items:start;
  grid-template-columns:minmax(0,652px) var(--panel-w);
  grid-template-areas:"overview sources" "results rail";
  padding:6px 28px 30px var(--results-left);
}
.results-main{grid-area:results;min-width:0;max-width:652px}

/* AI Overview: no container, sits on white; divider below, above results */
.ai-overview{grid-area:overview;margin-top:22px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.ai-ov-head{display:flex;align-items:center;gap:10px;font:500 16px var(--font-ui);color:#1f1f1f;margin-bottom:14px}
.ai-ov-menu{margin-left:auto;flex:0 0 auto}
.ai-ov-body{position:relative}
.ai-overview.collapsed .ai-ov-body{max-height:400px;overflow:hidden}
.ai-overview.collapsed .ai-ov-body::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:60px;
  background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none;
}
.ai-ov-body p{margin:0 0 12px;font-size:16px;line-height:1.5;color:#1f1f1f}
.ai-ov-sub{margin:18px 0 10px;font:500 18px var(--font-ui);color:#1f1f1f}
.ai-ov-list{margin:0 0 12px;padding-left:24px}
.ai-ov-list li{font-size:16px;line-height:1.5;color:#1f1f1f;margin-bottom:10px}
.ai-overview a{
  color:#1a73e8;text-decoration:underline;
  background:var(--flash);border-radius:4px;padding:0 2px;
}
.ai-overview a:hover{background:#d2e3fc}
/* Inline citation chip: first source's favicon + name + remaining count.
   Filled by js/app.js from the same data that renders the source panel. */
.cite-chip{
  display:inline-flex;align-items:center;gap:6px;vertical-align:middle;
  margin-left:6px;border:0;cursor:pointer;
  background:var(--chip-bg);border-radius:999px;padding:3px 10px 3px 4px;
  font:400 12px var(--font-ui);color:#444746;
}
.cite-chip:hover{background:#e8eaed}
.cc-fav{
  width:18px;height:18px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:#fff;display:flex;align-items:center;justify-content:center;
}
.cc-count{color:#5f6368}
/* Inline source list the chip expands to */
.cite-list{
  margin:10px 0 16px;border:1px solid var(--line);border-radius:14px;
  padding:2px 18px;background:#fff;
}
/* Entries keep panel styling, not the overview's highlighted-link styling */
.cite-list .src-title{background:transparent;padding:0;border-radius:0;text-decoration:none;color:#1f1f1f}
.cite-list .src-title:hover{background:transparent;text-decoration:underline}
.ai-ov-more{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:42px;margin-top:6px;
  background:#fff;border:1px solid #dadce0;border-radius:999px;
  font:400 14px var(--font-ui);color:#1f1f1f;cursor:pointer;
}
.ai-ov-more:hover{background:#f8f9fa}
.ai-ov-disclaimer{margin:12px 0 0;font:400 12px var(--font-ui);color:#70757a}

/* Source panel beside the AI Overview */
.ai-sources{
  grid-area:sources;position:relative;margin-top:22px;
  border:1px solid var(--line);border-radius:14px;background:#fff;
  padding:2px 18px 12px;
}
/* Height is set inline by js/app.js from the AI Overview's height, so the
   card never runs past it (420px is only a pre-JS fallback). The list
   scrolls inside that box. */
.src-list{max-height:420px;overflow-y:auto;scrollbar-width:thin}
/* Fade whenever the list is cut off; it lifts at the last source. */
.ai-sources.clipped:not(.at-end)::after{
  content:"";position:absolute;left:1px;right:1px;bottom:12px;height:56px;
  background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none;
}
/* Compact mode: js/app.js moves the panel inside the AI Overview, where the
   overview's own Show more reveals it. The full list shows (no clip, no
   scrolling, no fade) and entries keep panel styling, not overview-link
   styling. Hidden until the overview is opened. */
.ai-overview.folded .ai-sources{display:none}
.ai-overview .ai-sources{margin:18px 0 6px}
.ai-overview .ai-sources .src-list{max-height:none!important;overflow:visible}
.ai-overview .ai-sources::after{content:none}
.ai-overview .ai-sources .src-title{background:transparent;padding:0;border-radius:0;text-decoration:none;color:#1f1f1f}
.ai-overview .ai-sources .src-title:hover{background:transparent;text-decoration:underline}
.src{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.src:last-child{border-bottom:0}
.src-head{display:flex;align-items:center;gap:8px;font:400 12px var(--font-ui);color:#5f6368;margin-bottom:7px}
.src-fav{width:18px;height:18px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.src-row{display:flex;gap:12px}
.src-text{flex:1;min-width:0}
.src-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font:500 14px var(--font-ui);color:#1f1f1f;text-decoration:none;line-height:1.35;
}
.src-title:hover{text-decoration:underline}
.src-snippet{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin:5px 0 0;font:400 12px var(--font-ui);color:#70757a;line-height:1.4;
}
.src-thumb{flex:0 0 64px;width:64px;height:64px;border-radius:12px;object-fit:cover}

/* Search result entries */
.result{margin-top:32px;scroll-margin-top:120px}
.result.flash{animation:resultFlash 1.8s ease}
@keyframes resultFlash{
  0%{background:var(--flash)}
  100%{background:transparent}
}
.result-crumb{display:flex;align-items:center;gap:12px}
.r-menu{flex:0 0 auto;margin-left:auto;color:#5f6368;display:flex;align-items:center}
.fav-disc{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:var(--chip-bg);border:1px solid #ecedef;
  display:flex;align-items:center;justify-content:center;
}
.crumb-text{min-width:0;line-height:1.3}
.crumb-text .site{display:block;font-size:14px;color:#202124}
.crumb-text .url{display:block;font-size:14px;color:#202124;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result h3{margin:5px 0 0;font-size:20px;line-height:1.3}
.result h3 a{color:var(--link);text-decoration:none}
.result h3 a:hover{text-decoration:underline}
.result h3 a:visited{color:#681da8}
.result .meta{margin:3px 0 0;font-size:13px;color:var(--text-faint)}
.snippet{margin:6px 0 0;font-size:14px;line-height:1.58;color:#4d5156}
.snippet b{color:var(--text);font-weight:700}
/* Related-search chips under results with sub-topics */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font:400 13px var(--font-ui);color:var(--link);text-decoration:none;white-space:nowrap;
}
.chip:hover{background:#f8f9fa}
.snippet-list{margin:8px 0 0;padding:0 0 0 2px;list-style:none}
.snippet-list li{
  font-size:14px;color:var(--text-soft);padding:3.5px 0 3.5px 0;
}
.snippet-list li b{color:var(--text)}
.result-links{margin-top:8px;font-size:14px}
.result-links a{color:var(--link);text-decoration:none;margin-right:18px}
.result-links a:hover{text-decoration:underline}
.result-body{display:flex;gap:20px;align-items:flex-start}
.result-text{flex:1;min-width:0}
.result-thumb{
  flex:0 0 104px;width:104px;height:104px;object-fit:cover;
  border-radius:12px;border:1px solid var(--line-soft);margin-top:8px;
}

/* Right-side info panel (knowledge panel) */
.kpanel{
  grid-area:rail;margin-top:26px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
/* Portrait source (900x1260). A fixed pixel height would re-crop the photo
   at every panel width — badly once the panel goes full width — so the box
   keeps a constant aspect ratio and the crop stays identical everywhere.
   The 30% vertical anchor keeps headroom above the hair. */
.kpanel-img{
  width:100%;height:auto;aspect-ratio:4/3;max-height:400px;
  object-fit:cover;object-position:center 30%;
}
.kpanel-body{padding:18px 22px 22px}
.kpanel-body h2{font-size:26px;line-height:1.2}
.kpanel-body .sub{margin:2px 0 0;font-size:14px;color:var(--text-faint)}
.kpanel-body hr{border:0;border-top:1px solid var(--line-soft);margin:16px 0}
.kpanel-body p{margin:0 0 9px;font-size:14px;color:var(--text-soft)}
.kpanel-body p b{color:var(--text);font-weight:700}
.kpanel-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.kpanel-actions a{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid #d2e3fc;border-radius:999px;padding:7px 14px;
  font:500 13.5px var(--font-ui);color:#1a73e8;text-decoration:none;
}
.kpanel-actions a:hover{background:#f8fbff}
.kpanel-list{margin:0;padding:0;list-style:none}
.kpanel-list li{padding:7px 0;font-size:14px;color:var(--text-soft);border-bottom:1px solid var(--line-soft)}
.kpanel-list li:last-child{border-bottom:0}
.kpanel-list b{color:var(--text);font-weight:700}

/* Footer */
.g-footer{
  margin-top:64px;background:#f2f2f2;border-top:1px solid var(--line);
  padding:15px 28px;font-size:14px;color:var(--text-faint);
}
/* Last item in the home column, so it sits at the bottom of the viewport
   without being fixed on top of the centred content */
.home-footer{margin-top:0}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Below ~1280px a centered block leaves a gutter too narrow to hold the
   wordmark, so it gives way to the favicon inside the search bar (Google
   swaps its logo the same way) and the gutters stay equal. */
@media(max-width:1279px){
  .mini-logo{display:none}
  .sb-fav{display:flex}
}

@media(max-width:999px){
  /* Compact mode: no wordmark, no source panel; the star favicon inside the
     search bar and the inline citation chip take their places. */
  :root{--results-left:24px}
  .mini-logo{display:none}
  .sb-fav{display:flex}
  .results-header{gap:14px;padding-top:16px;padding-right:24px}
  .results-header .searchbox{flex:1 1 auto}
  .results-layout{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"overview" "results" "rail";
    padding-right:24px;
  }
  .results-main{max-width:none}
  .kpanel{width:100%;max-width:652px}
}
@media(max-width:700px){
  .header-icons{margin-left:auto}
  .shortcuts{gap:8px 10px}
  .shortcut{width:82px}
  .result-thumb{flex-basis:76px;width:76px;height:76px}
}