/* Quin animated cards — source of truth. Do not change values.
   Everything is scoped to .qc (each card's root element). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&display=swap');

  .qc,.qc *{box-sizing:border-box;margin:0;padding:0}
  .qc{font-family:Archivo,system-ui,sans-serif;font-weight:400;color:#544946;-webkit-font-smoothing:antialiased}
  .qc{
    --ink:#1f130f; --grey:#544946; --paper:#f7f6f0; --paper-hi:#fffcf2; --blue:#a9e1ff; --mint:#e6f9e1;
  }
  /* ---------- Shared card ---------- */
  .qc{
    background:#fff;border-radius:8px;padding:28px;display:flex;flex-direction:column;gap:22px;
    box-shadow:0 1px 2px rgba(20,20,20,.04),0 12px 32px rgba(20,20,20,.07);
  }
  .qc .head{display:flex;gap:14px;align-items:center}
  .qc .mark{width:40px;height:40px;border-radius:7px;overflow:hidden;flex:none;background:var(--blue)}
  .qc .mark img{width:100%;height:100%;display:block}
  .qc .titles{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
  .qc .title{font-weight:600;font-size:17px;line-height:1.3;color:var(--ink);white-space:nowrap}
  .qc .sub{position:relative;height:18px;font-size:14px;line-height:18px;white-space:nowrap}
  .qc .sub > span{position:absolute;left:0;top:0;opacity:.6}
  .qc .sub > span.working{
    opacity:1;
    background:linear-gradient(90deg,rgba(84,73,70,.5) 0%,rgba(84,73,70,.5) 40%,var(--ink) 50%,rgba(84,73,70,.5) 60%,rgba(84,73,70,.5) 100%);
    background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:qc-shimmer 1.6s linear infinite;
  }
  @keyframes qc-shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
  .qc .n{font-variant-numeric:tabular-nums}
  .qc .panel{background:var(--paper);border-radius:6px;padding:18px 20px}
  .qc .stack{display:grid}
  .qc .stack > *{grid-area:1/1}
  .qc .ink{color:var(--ink)}
  .qc .t15{font-size:15px;line-height:1.5}
  .qc .t13{font-size:13px;line-height:1.4}
  .qc .muted{opacity:.7}
  .qc .tile{width:30px;height:30px;border-radius:6px;overflow:hidden;background:var(--paper);flex:none}
  .qc .tile img{width:100%;height:100%;display:block}
  .qc .banner{background:var(--mint);border-radius:6px;padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink)}
  .qc .banner .esign{width:26px;height:26px;margin-left:auto;display:block}
  /* Grow wrapper: cancels the parent gap while collapsed, so the card
     only gets taller as content is actually added. */
  .qc .grow{overflow:clip;overflow-clip-margin:6px}
  .qc .ico{width:16px;height:16px;flex:none;position:relative}
  .qc .ico > div{position:absolute;inset:0}
  .qc .ico svg{display:block;width:16px;height:16px}
  .qc .spin{animation:qc-spin .9s linear infinite}
  @keyframes qc-spin{to{transform:rotate(360deg)}}
  .qc .strike{position:relative}
  .qc .strike::after{content:"";position:absolute;left:0;right:0;top:55%;height:1.5px;background:currentColor;transform:scaleX(var(--s,0));transform-origin:left}
  .qc .swap{display:inline-grid;vertical-align:top}
  .qc .swap > span{grid-area:1/1}
  /* ---------- 1. Daily brief ---------- */
  .qc .mtg{display:grid;grid-template-columns:58px 1fr;gap:4px 0}
  .qc .mtg + .mtg{margin-top:16px}
  .qc .mtg .when{display:flex;align-items:center;gap:10px;font-size:15px;line-height:22px;height:22px}
  .qc .mtg .dot{width:6px;height:6px;background:var(--blue)}
  .qc .mtg .what{font-size:15px;line-height:22px;color:var(--ink)}
  .qc .mtg .prep{grid-column:2;position:relative;font-size:14px;line-height:1.45;min-height:20px}
  .qc .mtg .prep .txt{opacity:.75;display:block}
  .qc .skel{position:absolute;left:0;top:6px;height:8px;border-radius:3px;background:rgba(84,73,70,.1)}
  /* ---------- 2. Notes ---------- */
  .qc .listen{display:flex;flex-direction:column;justify-content:center;gap:14px}
  .qc .wave{display:flex;align-items:center;gap:3px;height:36px}
  .qc .wave i{display:block;flex:1;height:100%;border-radius:2px;background:var(--ink);transform:scaleY(.15)}
  .qc .quote{font-size:14px;line-height:1.45}
  .qc .quote b{font-weight:500;color:var(--ink)}
  .qc .checks{display:flex;flex-direction:column}
  .qc .chk{display:flex;align-items:center;gap:12px;font-size:15px;line-height:22px;color:var(--ink)}
  /* ---------- 3. Inbox ---------- */
  .qc .msg{font-size:15px;line-height:1.6;color:var(--ink)}
  .qc .incoming{color:var(--grey)}
  .qc .incoming .from{display:block;font-size:13px;font-weight:500;margin-bottom:2px}
  .qc .reply .w{display:inline-block;opacity:0;white-space:pre}
  .qc .hl{background-image:linear-gradient(var(--blue),var(--blue));background-repeat:no-repeat;background-size:0% 100%;border-radius:3px;margin:0 -2px;padding:0 2px}
  .qc .actions{display:flex;justify-content:space-between;align-items:center}
  .qc .tiles{display:flex;gap:4px}
  .qc .btns{display:flex;gap:8px}
  .qc .btn{height:34px;border-radius:6px;padding:0 14px;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500}
  .qc .btn.edit{background:var(--paper);color:var(--ink)}
  .qc .btn.send{background:var(--ink);color:#fff}
  .qc .btn.send svg{width:13px;height:13px}
  /* ---------- 4. Calendar ---------- */
  .qc .slots{display:flex;flex-direction:column}
  .qc .slot{position:relative;border-radius:6px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;overflow:hidden}
  .qc .slot .fill{position:absolute;inset:0;background:var(--paper)}
  .qc .slot .fill.dark{background:var(--ink);transform:scaleX(0);transform-origin:left}
  .qc .slot > span,
.qc .slot > .right{position:relative}
  .qc .slot .when{font-size:15px;line-height:22px;color:var(--ink)}
  .qc .slot .right{display:flex;align-items:center;gap:10px;font-size:13px;white-space:nowrap}
  .qc .slot .tick-big{position:absolute;right:0;top:50%;margin-top:-9px;width:16px;text-align:center}
  .qc .slot .why{opacity:0}
  .qc .slot .tick-big{font-size:18px;line-height:18px;color:var(--paper-hi);opacity:0}
  .qc .note{font-size:15px;line-height:1.5}
  /* ---------- 5. Paperwork ---------- */
  .qc .fields{display:flex;flex-direction:column;gap:14px}
  .qc .field .lab{font-size:13px;line-height:1.4;opacity:.7}
  .qc .field .val{display:flex;align-items:center;justify-content:space-between;height:24px;position:relative}
  .qc .field .v{font-size:15px;line-height:24px;color:var(--ink);white-space:pre}
  .qc .field .v .c{opacity:0}
  .qc .field .src{height:20px;width:auto;display:block;opacity:0}
  .qc .field .skel{top:8px}
  /* ---------- 6. Updates everything ---------- */
  .qc .tally{align-self:flex-start;margin-top:2px;font-size:14px;color:var(--ink);white-space:nowrap}
  .qc .tally .of{opacity:.6;color:var(--grey)}
  .qc .progress{height:2px;background:var(--paper);border-radius:2px;margin-top:-8px;overflow:hidden}
  .qc .progress i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}
  .qc .rows{display:flex;flex-direction:column}
  .qc .row{display:flex;align-items:center;gap:12px}
  .qc .row .tile{width:32px;height:32px}
  .qc .row .label{flex:1;min-width:0;position:relative;height:22px;font-size:15px;line-height:22px;white-space:nowrap;color:var(--ink)}
  .qc .row .label > span{position:absolute;left:0;top:0}
  .qc .row .old{color:var(--grey);opacity:.6}
  .qc .row .meta{font-size:13px;opacity:0;white-space:nowrap}
  /* Waiting state: dashed ring */
  .qc .spin circle{stroke-opacity:.5;stroke-dasharray:2.2 2.6;stroke-width:1.5}
  /* Stop-motion: CSS loops step instead of glide */