/* The app pages' chrome: the estimates list, the preview screen, the samples
   page. The document inside the preview frame is styled by template.html and
   is deliberately untouched by anything here.

   One light theme. These screens frame a white sheet of paper, and a dark
   surround makes the sheet glare, so the app does not follow the system's
   dark mode. Woolf IT Solutions' colors throughout. The header carries Woolf
   IT's mark until someone signs in, and the client's own logo after.

   Four text sizes. Page titles are 28px, headings 17px, body 15px and
   secondary lines 13px, with nothing smaller. The preview has no page title,
   so the Email Now form's 21px title takes that place there. */
:root{
  color-scheme:light;
  --ink:#0a1828;       /* headings and strong text */
  --body:#334155;      /* running text */
  --muted:#586377;     /* secondary text, 4.5:1 or better on paper and white */
  --rule:#e2e8f0;      /* hairlines */
  --control:#d3dbe5;   /* borders on fields */
  --paper:#f5f7fa;     /* the page behind the cards */
  --surface:#ffffff;
  --blue:#004884;      /* links and the one primary action */
  --blue-deep:#003a6b; /* hover on light */
  --blue-soft:#ebf2f9; /* the tint behind messages and hovered rows */
  --warn-ink:#7a4a00; --warn-bg:#fff8e8; --warn-rule:#f1d8a0;
  --desk:#e7ebf0;
  --radius:16px;
  --card-shadow:0 1px 2px rgba(10,24,40,.05),0 6px 20px rgba(10,24,40,.06);
  --shadow:0 1px 3px rgba(10,24,40,.08),0 14px 36px rgba(10,24,40,.13);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
/* An author display rule outranks the UA stylesheet, so .desk{display:flex}
   would otherwise keep showing while the hidden attribute is set. */
[hidden]{display:none!important}
html{background:var(--paper)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--body);
  font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--blue);text-underline-offset:2px}
a:hover{color:var(--blue-deep)}
h1{font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.018em;color:var(--ink);margin:0}
h2{font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px}
p{margin:0}
main{flex:1}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* The bar across the top of every app page. It is translucent and stays put
   while the page scrolls under it, and its contents line up with the page's. */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:10px 20px;
  flex-wrap:wrap;min-height:68px;padding:10px max(24px,calc((100% - 992px)/2));
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(10,24,40,.08)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.bar{background:rgba(255,255,255,.97)}}
/* The left side gives way first. Its titles end in an ellipsis instead of
   pushing the buttons onto a second row. */
.left{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 0}
.who{min-width:0}
.title{font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subject{font-size:13px;line-height:1.35;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.actions{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.navlink{color:var(--body);text-decoration:none;font-weight:500;padding:6px 4px;border-radius:6px;transition:color .15s}
.navlink:hover{color:var(--blue)}
.person{font-size:13px;color:var(--muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back{display:inline-flex;align-items:center;flex:none;padding:7px 14px;border-radius:999px;background:rgba(10,24,40,.06);
  color:var(--ink);text-decoration:none;font-weight:600;white-space:nowrap;transition:background-color .15s}
.back:hover{background:rgba(10,24,40,.1);color:var(--ink)}

/* Whose page this is. Signed out, it is Woolf IT Solutions', so the wolf sits
   beside "Template Generator by Woolf IT Solutions". Signed in, it is the
   client's workspace, so the header shows the client's logo and a quiet
   product name. Until the page knows which, neither mark shows, so nobody
   sees one swap for the other. data-workspace on <html> says which. live.js
   and preview.js set it, and the samples page fixes it in its markup. */
.marks{display:flex;align-items:center;flex:none}
html:not([data-workspace]) .marks{margin-right:-12px}
.brand-glyph{display:none;width:26px;height:28px}
[data-workspace="woolf"] .brand-glyph{display:block}
.by{display:none;font-weight:400;color:var(--muted)}
[data-workspace="woolf"] .by{display:inline}
/* The client's logo. There is one client today, Florida Stucco Contractors,
   and the next rule is the only place the app's pages name its logo, so a
   second client changes that one rule. The file is opaque, a picture on a
   white ground, so it sits whole on a white tile, never cropped or recolored.
   Its artwork rides high in the frame, so it is set 2px low to look
   centered. Until it is wanted it stays in the layout at no width, so it has
   already loaded when it shows. */
.client-logo{background:#fff url("../assets/fls-logo.png") center calc(50% + 2px)/auto 40px no-repeat}
.client-logo{display:block;width:0;height:48px;border-radius:10px;visibility:hidden}
[data-workspace="client"] .client-logo{width:80px;visibility:visible;
  box-shadow:0 0 0 1px rgba(10,24,40,.08),0 1px 3px rgba(10,24,40,.08)}
[data-workspace="client"] .marks{margin-right:2px}
[data-workspace="client"] .product{font-size:13px;font-weight:600;letter-spacing:0;color:var(--muted)}
[data-workspace="client"] .product + .subject{font-size:15px;font-weight:600;color:var(--ink);margin-top:0}

/* Buttons are pills. One primary per screen, in Woolf blue. */
button{font:inherit;font-size:15px;font-weight:600;line-height:20px;padding:8px 18px;border-radius:999px;
  border:1px solid transparent;background:rgba(10,24,40,.06);color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:background-color .15s,border-color .15s,color .15s}
button:hover:not(:disabled){background:rgba(10,24,40,.1)}
button.primary{background:var(--blue);color:#fff}
button.primary:hover:not(:disabled){background:var(--blue-deep)}
button.quiet{background:transparent;color:var(--muted)}
button.quiet:hover:not(:disabled){background:var(--blue-soft);color:var(--blue)}
button:disabled{opacity:.45;cursor:default}

/* Short messages under the bar. One line each where they can be. */
.strips{max-width:1040px;width:100%;margin:0 auto;padding:0 24px}
.strips:not(:empty){padding-top:16px}
.strip{display:block;padding:12px 16px;border-radius:12px;background:var(--blue-soft);border:1px solid #d8e5f2;
  color:var(--ink);margin-bottom:10px}
.strip.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-rule)}
.strip b{margin-right:6px;font-weight:600}
.strip ul{margin:6px 0 2px;padding-left:20px}
.strip li + li{margin-top:2px}
.strip code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;background:rgba(10,24,40,.06);
  padding:1px 6px;border-radius:5px}

/* Notes from QuickBooks: folded away until someone wants them. */
.notes{max-width:1040px;width:100%;margin:0 auto;padding:0 24px}
.notes summary{cursor:pointer;font-size:13px;color:var(--muted);padding:10px 0;list-style:none;
  display:flex;align-items:center;gap:9px;width:max-content;max-width:100%;border-radius:6px}
.notes summary::-webkit-details-marker{display:none}
.notes summary::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.notes[open] summary::before{transform:rotate(45deg)}
.notes summary:hover{color:var(--ink)}
.notes ul{margin:0 0 14px;padding:0 0 0 24px;font-size:13px;color:var(--muted)}
.notes li{margin-bottom:4px}

/* Page body for the list and the samples. */
.wrap{max-width:1040px;width:100%;margin:0 auto;padding:40px 24px 56px}
.heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.meta{color:var(--muted);margin-top:6px}
.tag{display:inline-block;font-size:13px;line-height:20px;padding:0 8px;border-radius:6px;background:rgba(10,24,40,.06);
  color:var(--body);font-weight:600;text-transform:capitalize;vertical-align:1px}
.section-note{color:var(--muted);margin-bottom:14px;max-width:72ch}

/* One centered card for the two gates: signing in, and the connect. */
.gate{max-width:400px;margin:clamp(24px,9vh,88px) auto 0;background:var(--surface);border-radius:18px;
  padding:36px 32px 30px;box-shadow:var(--card-shadow);text-align:center}
.gate-mark{display:block;width:52px;height:56px;margin:0 auto 18px}
.gate h1{margin-bottom:10px}
.gate p{color:var(--muted);margin:0 auto 24px;max-width:32ch}
.gate button.primary{width:100%;padding-top:11px;padding-bottom:11px}
.gate .fallback{display:block;margin:16px auto 0;padding:6px 12px;color:var(--blue);font-weight:500}
.gate .fallback:hover:not(:disabled){background:transparent;color:var(--blue-deep);text-decoration:underline}
#microsoft-way:not([hidden]) ~ #passcode-way{margin-top:24px;padding-top:24px;border-top:1px solid var(--rule)}
#no-way{margin-bottom:0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.gate .row{flex-direction:column;align-items:stretch}
input[type="password"]{font:inherit;font-size:15px;padding:11px 14px;border:1px solid var(--control);border-radius:12px;
  background:var(--surface);color:var(--ink);flex:1;min-width:160px;transition:border-color .15s}
.gate input[type="password"]{flex:none}
input[type="password"]:hover{border-color:#b9c4d2}
/* Text fields show focus the way macOS draws it, with a blue edge and a soft ring. */
input:focus-visible,textarea:focus-visible{outline:3px solid rgba(0,72,132,.28);outline-offset:0;border-color:var(--blue)}

/* Sign in with Microsoft, drawn like Microsoft's own button. White, a grey
   hairline, the four squares, and Segoe UI where the system has it. */
.ms-signin{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:41px;padding:0 12px;
  border:1px solid #8c8c8c;border-radius:4px;background:#fff;color:#5e5e5e;
  font-family:"Segoe UI",var(--font);font-size:15px;font-weight:600;line-height:1}
.ms-signin:hover:not(:disabled){background:#f6f6f6;border-color:#767676;color:#3d3d3d}
.ms-signin svg{width:21px;height:21px;flex:none}

/* The estimate list. Every row opens its estimate. */
.tablecard{background:var(--surface);border-radius:var(--radius);box-shadow:var(--card-shadow);overflow:hidden}
.list{width:100%;border-collapse:collapse}
.list th,.list td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--rule);vertical-align:middle}
.list th{font-size:13px;font-weight:600;color:var(--muted);padding-top:12px;padding-bottom:12px}
.list tr:last-child td{border-bottom:0}
.list td.num,.list th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.list td.num{color:var(--ink);font-weight:500}
.list td.when{color:var(--muted);white-space:nowrap}
.list td.go{width:1%;color:#a0aab7;text-align:right;padding-left:0;padding-right:20px;font-size:17px;line-height:1}
.list tbody tr{cursor:pointer;transition:background-color .15s}
.list tbody tr:hover{background:#f6f9fc}
.list tbody tr:hover td.go{color:var(--blue)}
.list td a{color:var(--blue);font-weight:600;text-decoration:none}
.list td a:hover{text-decoration:underline}

/* Samples: plain lists of links. */
.wrap > h2{margin-top:36px}
.wrap > .heading + h2{margin-top:28px}
.samples{list-style:none;margin:0 0 8px;padding:0;background:var(--surface);border-radius:var(--radius);
  box-shadow:var(--card-shadow);overflow:hidden}
.samples li{border-bottom:1px solid var(--rule)}
.samples li:last-child{border-bottom:0}
.samples a{display:flex;align-items:center;gap:16px;padding:15px 20px;text-decoration:none;color:var(--ink);
  transition:background-color .15s}
.samples a:hover{background:#f6f9fc}
.samples a b{color:var(--blue);font-weight:600}
.samples a span{color:var(--muted);text-align:right;margin-left:auto}
.samples a::after{content:"";flex:none;width:7px;height:7px;border-top:2px solid #a0aab7;border-right:2px solid #a0aab7;
  transform:rotate(45deg);margin:0 2px 0 -4px;transition:border-color .15s}
.samples a:hover::after{border-color:var(--blue)}
.wrap > .section-note:last-child{margin-top:28px;margin-bottom:0}

/* The sheet, one letter-sized frame per printed page. Sizes and spacing here
   are the preview's page geometry. Leave them alone. */
.desk{flex:1;background:var(--desk);padding:28px 24px 56px;display:flex;justify-content:center}
.fit{width:100%;max-width:816px}
.pages{width:816px;transform-origin:top left;display:flex;flex-direction:column;gap:14px}
.page-frame{width:816px;height:1056px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.page-frame iframe{display:block;width:816px;height:1056px;border:0}
.page-label{font-size:13px;color:var(--muted);text-align:center;margin:0 0 14px}

/* The preview screen is all desk under the bar, like a document open on a
   table, and its messages line up with the sheet. */
.sheet-view{background:var(--desk)}
html:has(> body.sheet-view){background:var(--desk)}
.sheet-view .strips,.sheet-view .notes{max-width:864px}
/* In a narrow window the preview's buttons take a row of their own, so the
   estimate's title keeps room to be read. */
@media (max-width:720px){
  .sheet-view .marks{display:none}
  .sheet-view .left{flex:1 1 auto}
  .sheet-view .actions{width:100%}
  .sheet-view .actions button{flex:1}
}

/* The Email Now form. A modal, so nothing else on the screen can be pressed
   while a send is being decided or is under way. */
dialog.send{width:min(560px,calc(100vw - 32px));border:0;border-radius:18px;padding:28px 28px 24px;
  box-shadow:0 2px 6px rgba(10,24,40,.08),0 24px 64px rgba(10,24,40,.24);color:var(--body);background:var(--surface)}
dialog.send::backdrop{background:rgba(10,24,40,.3);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog.send h2{font-size:21px;line-height:1.25;letter-spacing:-.015em;margin:0 0 6px}
dialog.send label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:16px 0 6px}
dialog.send input,dialog.send textarea{display:block;width:100%;font:inherit;font-size:15px;padding:10px 14px;
  border:1px solid var(--control);border-radius:12px;background:var(--surface);color:var(--ink);transition:border-color .15s}
dialog.send input:hover,dialog.send textarea:hover{border-color:#b9c4d2}
dialog.send textarea{resize:vertical;min-height:140px;line-height:1.5}
.send-note{font-size:13px;line-height:1.45;color:var(--muted);margin-top:14px}
/* Who the mail comes from, as one quiet line, and a picture of the
   signature that goes under the message. */
.send-from{font-size:13px;line-height:1.45;color:var(--muted);margin:14px 0 0}
.send-from b,.send-from strong{font-weight:600;color:var(--body)}
.send-signature{margin:12px 0 0}
.send-signature img{display:block;max-width:min(400px,100%);height:auto;border:1px solid var(--rule);border-radius:8px}
.send-signature figcaption{font-size:13px;line-height:1.45;color:var(--muted);margin-top:6px}
.send-error{font-size:15px;margin-top:12px;padding:10px 14px;border-radius:12px;background:var(--warn-bg);color:var(--warn-ink);
  border:1px solid var(--warn-rule)}
.send-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.send-actions button{min-width:96px}

.support{padding:24px 24px 32px;font-size:13px;color:var(--muted);text-align:center}
.support a{color:var(--muted)}
.support a:hover{color:var(--blue)}

/* The page that forwards to the estimates. */
.opening{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center}
.opening img{width:52px;height:56px;margin-bottom:8px}
.opening .title{white-space:normal}

/* Phones. The bar takes a second row when it needs one, whose page first and
   then what can be done. The page frames keep their size, and preview.js
   scales them down to the screen. */
@media (max-width:640px){
  .bar{padding:10px 16px;min-height:60px}
  .left{flex:1 1 auto}
  .actions{flex:1 1 auto;justify-content:flex-end;flex-wrap:nowrap}
  .person{min-width:0;flex:0 1 auto}
  [data-workspace="client"] .navlink{margin-right:auto}
  [data-workspace="woolf"] .product .by{display:block;font-size:13px;line-height:1.35}
  .client-logo{height:40px;background-size:auto 32px;border-radius:9px}
  [data-workspace="client"] .client-logo{width:66px}
  .strips,.notes{padding:0 16px}
  .wrap{padding:28px 16px 40px}
  .gate{padding:32px 22px 26px}
  .heading .row{width:100%}

  /* The list shows one estimate per block. Number and total share the first
     line, then come the customer and the date. */
  .list,.list tbody{display:block}
  .list thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .list tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;column-gap:12px;row-gap:2px;
    padding:14px 16px;border-bottom:1px solid var(--rule)}
  .list tbody tr:last-child{border-bottom:0}
  .list td{display:block;padding:0;border:0}
  .list td:nth-child(1){grid-column:1;grid-row:1}
  .list td:nth-child(2){grid-column:1 / span 2;grid-row:2;color:var(--ink)}
  .list td:nth-child(3){grid-column:1 / span 2;grid-row:3;font-size:13px}
  .list td:nth-child(4){grid-column:2;grid-row:1}
  .list td.go{grid-column:3;grid-row:1 / span 3;align-self:center;width:auto;padding:0}

  .samples a{display:grid;grid-template-columns:minmax(0,1fr) 12px;row-gap:2px;column-gap:12px}
  .samples a span{grid-column:1;text-align:left;margin-left:0}
  .samples a::after{grid-column:2;grid-row:1 / span 2;align-self:center;margin:0}
}