/* The demo's Google Doc (demo-doc.html), drawn after Docs as it looks today
   (Material 3): the title bar, the rounded toolbar, the Document tabs panel,
   the page on its light grey ground and the Google apps side panel. Docs'
   own sizes where they matter: an 816px page (8.5in at 100%) with 96px (1in)
   margins, Arial 11pt text. Made to fit any width, folding things away the
   way Docs does as the window narrows. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{position:relative;font-family:"Google Sans","Google Sans Text",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
  background:#f9fbfd;color:#1f1f1f;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}
svg{display:block;flex:none;fill:currentColor}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── Title bar ── */
#docs-chrome{flex:0 0 auto;background:#f9fbfd;position:relative;z-index:1}
.dhead{height:64px;padding:0 16px 0 14px;display:flex;align-items:center;gap:6px}
.dlogo{width:40px;height:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:center;margin-right:2px}
.dmeta{min-width:0;flex:1 1 auto;padding-top:2px}
.dtitle-row{display:flex;align-items:center;gap:6px;height:26px}
.dtitle{font-size:18px;line-height:24px;color:#1f1f1f;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid transparent;border-radius:4px}
.dstar{color:#444746;margin-left:2px}
.dsave{font-size:12.5px;color:#444746;white-space:nowrap;opacity:0;transition:opacity .25s;margin-left:6px}
.dsave.on{opacity:1}
.dmenu{display:flex;font-size:14px;line-height:22px;color:#1f1f1f;white-space:nowrap;overflow:hidden}
.dmenu span{padding:0 7px;border-radius:4px}
.dright{margin-left:auto;display:flex;align-items:center;gap:8px;color:#444746;flex:none}
.hb{height:40px;min-width:40px;border-radius:20px;display:flex;align-items:center;justify-content:center}
.hb-meet{padding:0 2px 0 10px;gap:0}
.hb .caret{margin-left:-2px}
.share{display:flex;align-items:stretch;height:40px;border-radius:20px;background:#c2e7ff;color:#001d35;overflow:hidden;margin-left:4px}
.share-main{display:flex;align-items:center;gap:8px;padding:0 14px 0 16px;font-size:14px;font-weight:500;letter-spacing:.1px}
.share-more{display:flex;align-items:center;padding:0 8px 0 6px;border-left:1px solid rgba(0,29,53,.14)}
.avatar{width:32px;height:32px;border-radius:50%;background:#7b8a9e;color:#fff;font-size:14px;font-weight:500;display:flex;align-items:center;justify-content:center;margin-left:8px}

/* ── Toolbar ── */
.toolbar{display:flex;align-items:center;height:40px;margin:0 72px 0 16px;padding:0 6px 0 8px;border-radius:24px;background:#edf2fa;
  color:#444746;font-size:14px;white-space:nowrap;overflow:hidden}
.tg{display:flex;align-items:center;flex:none}
.tb{height:28px;min-width:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;margin:0 1px}
.tb svg{width:20px;height:20px}
.tb-dd{padding:0 0 0 4px}
.tb .caret{width:18px;height:18px;margin-left:-3px}
.sep{flex:0 0 1px;width:1px;height:20px;background:#c7c7c7;margin:0 5px}
.dd{display:flex;align-items:center;gap:4px;height:28px;padding:0 2px 0 6px;color:#444746;font-size:14px}
.dd svg{width:20px;height:20px}
.dd-zoom{min-width:74px;justify-content:space-between}
.dd-style{min-width:118px;justify-content:space-between}
.dd-font{min-width:108px;justify-content:space-between;background:rgba(68,71,70,.08);border-radius:4px;margin:0 2px}
.fsbox{min-width:34px;height:28px;border:1px solid #747775;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#1f1f1f;margin:0 3px}
.tb-overflow{display:none}
.tg-end{margin-left:auto;padding-left:8px}
.tb-mode{padding:0 2px 0 6px}

/* ── Google apps side panel ── */
.sidepanel{position:absolute;top:64px;right:0;bottom:0;width:56px;display:flex;flex-direction:column;align-items:center;gap:30px;padding-top:10px;z-index:1}
.sp-rule{width:20px;height:1px;background:#dadce0;margin:-8px 0}
.sp-add{color:#444746}

/* ── Editor: the tabs panel and the page ── */
.main{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;margin:8px 56px 0 0}
/* The tabs panel stays put while the page scrolls under it, as in Docs.
   Sticky, with no height of its own, so it takes no room from the page. */
.rail{position:sticky;top:0;height:0;margin-bottom:-10px;width:250px;padding:10px 16px 0 22px;color:#1f1f1f;z-index:1}
.rail-back{width:40px;height:40px;margin-left:-8px;display:flex;align-items:center;justify-content:center;color:#444746}
.rail-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:500;margin:22px 0 14px 4px;color:#1f1f1f}
.rail-head svg{color:#444746}
.rail-chip{display:flex;align-items:center;gap:12px;height:40px;background:#d3e3fd;border-radius:20px;padding:0 8px 0 16px;font-size:14px;font-weight:500;color:#0b57d0}
.rail-chip svg{color:#0b57d0}
.rail-dots{margin-left:auto;color:#444746 !important}
.rail-note{font-size:12px;font-style:italic;color:#444746;line-height:1.5;margin-top:12px;padding:0 4px}
.rail-mini{display:none;position:sticky;top:10px;margin:10px 0 -50px 14px;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;color:#444746}
.canvas{position:relative;padding:12px 0 40px;display:flex;justify-content:center}
/* The page runs on well below the last line, as a Doc page does, so the
   overlay's scroll keeper has room to lift the line being typed clear of
   the extension's cards where they sit over the text (on a phone). */
.page{width:816px;min-height:1056px;background:#fff;padding:96px 96px max(96px,70vh);border:1px solid #c7c7c7;border-bottom:0;
  -webkit-user-select:text;user-select:text;cursor:text;font-family:Arial,Helvetica,sans-serif}
.page h1{font-size:21.33px;line-height:1.2;font-weight:400;margin:0 0 10px;color:#000}
.page p{font-size:14.67px;line-height:1.5;color:#000;white-space:pre-wrap;overflow-wrap:break-word}

/* Docs' caret: a thin black bar that blinks while nothing is typed. */
.kix-cursor{position:relative;display:inline-block;width:0;height:1.2em;vertical-align:text-bottom}
.kix-cursor-caret{position:absolute;left:0;top:0;width:2px;height:1.2em;background:#000}
.kix-cursor.blink .kix-cursor-caret{animation:caret 1.06s steps(1) infinite}
.kix-cursor.off{visibility:hidden}
@keyframes caret{50%{opacity:0}}

/* ── Narrower windows ──
   The tabs panel needs its own room left of the page; without it Docs folds
   it into a button. Then the toolbar sends its right-hand tools to "more". */
@media (max-width:1379px){
  .rail{display:none}
  .rail-mini{display:flex}
}
@media (max-width:1180px){
  .g-para{display:none}
  .tb-overflow{display:flex}
}
@media (max-width:1000px){
  .g-ins,.g-size,.hb-meet,.tg-end .sep,.tg-end .tb:last-child{display:none}
  .page{width:calc(100% - 120px)}
}
@media (max-width:860px){
  .g-fmt,.hb{display:none}
  .page{padding:72px 64px max(72px,70vh)}
}
@media (max-width:720px){
  /* A phone-sized window: the page fills the width, as Docs' print layout
     would once zoomed to fit. */
  .dhead{height:56px;padding:0 10px 0 8px;gap:4px}
  .dlogo{transform:scale(.85);margin-right:0}
  .dtitle{font-size:16px;padding:0 4px}
  .dsave,.avatar,.g-font,.dd-zoom,.tg-end{display:none}
  .dmenu{font-size:13px}
  .dmenu span{padding:0 5px}
  .share{height:36px;margin-left:0}
  .share-main{padding:0 12px}
  .share-txt,.share-more{display:none}
  .toolbar{margin:0 10px;padding:0 4px}
  .sidepanel{display:none}
  .main{margin-right:0}
  .rail-mini{display:none}
  .canvas{padding:10px 10px 30px}
  .page{width:100%;padding:36px 28px max(36px,70vh);min-height:760px}
  .page h1{font-size:18px}
  .page p{font-size:14px}
}
@media (max-width:400px){
  .g-style .dd-style{min-width:0}
}
/* The extension's cards (overlay.js), on a phone. The reference card docks
   along the bottom, beside the timer card, but a phone-wide window has no
   room beside it (the extension itself never runs this narrow), so here the
   two stack in the corner: the reference card right above the timer card,
   and it steps aside while the break card is up. --hd-timer-h is the timer
   card's height, kept by demo-doc.js. The overlay's scroll keeper still
   keeps the typing line clear of both. */
@media (max-width:640px){
  #__humdocs_overlay__{right:18px !important}
  #__humdocs_ref_host__{left:auto !important;right:18px !important;top:auto !important;
    bottom:calc(22px + var(--hd-timer-h, 190px) + 10px) !important;transform:none !important}
  .hd-on-break #__humdocs_ref_host__{visibility:hidden !important}
}
@media (prefers-reduced-motion:reduce){
  .kix-cursor.blink .kix-cursor-caret{animation:none}
}