/* UI experiment (branch ui-tweaks-and-bugs): cards and buttons in the style of the "Running Agents" concept.
   Loaded after theme-conflate.css; remove its <link> in index.html to go back to the current look.

   Cards    flat, no drop shadow, a single hairline edge, and on the big panels a folder tab raised on the top edge
   Buttons  small rounded rectangles instead of pills: outlined by default, solid for the one main action
            (like the "Linear" / "Notion" tags); icon buttons are hairline circles
   Type     lighter headings, tiny grey labels, and big numbers in a dot-matrix face
   Color    still black and white only */

:root {
  --dots: "Doto", var(--mono);
  --radius: 20px;
  --edge: rgba(10, 10, 10, 0.1);       /* the one hairline around every card */
  --edge-strong: rgba(10, 10, 10, 0.22);
  --card-flat: #ffffff;
  --bg: #ececec;
  --todo-fill: #ffffff;
}
html.dark {
  --bg: #000000;
  --edge: rgba(255, 255, 255, 0.09);
  --edge-strong: rgba(255, 255, 255, 0.24);
  --card-flat: #070707;
  --haze: rgba(255, 255, 255, 0.04);
  --raised: #111111;
  --raised-hover: #171717;
  --tint: transparent;
  --todo-fill: #000000;
}

/* ---------- Type ---------- */
.page-head h1 { font-weight: 500; letter-spacing: -0.04em; }
.up-head h2, .set-card h3, .conn-title h3, .start-text h2 { font-family: var(--font); font-weight: 400; letter-spacing: -0.02em; }
.up-head h2 { font-size: 17px; }
.section-title { font-size: 11.5px; letter-spacing: 0.01em; margin-bottom: 14px; }
/* big numbers: dot matrix, like the "89 % left" and "20 tasks" counters */
.grade-card .pct, .countdown .pct, .dots { font-family: var(--dots); font-weight: 700; letter-spacing: 0.02em; }
/* ...except grade percentages, which use the page heading's face */
.grade-card .pct, .grade-card .pct.dots { font-family: var(--display); font-weight: 500; letter-spacing: -0.04em; font-size: 40px; line-height: 1; }
.grade-card .pct small { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; font-size: 15px; color: var(--text-3); margin-left: 1px; }

/* ---------- Cards: flat, one hairline, no glow ---------- */
.glass, .grade-card.blob, .modal, .toast {
  background: var(--card-flat); box-shadow: inset 0 0 0 1px var(--edge); border-radius: var(--radius);
}
.glass:hover { background: var(--card-flat); }
.glass::after { display: none; }
.grade-card.blob::before { display: none; }  /* no grain */

/* the folder tab: a raised strip on the top edge of the big panels, on the right so it clears the section label */
.glass.todo, .glass.upcoming, .glass.feed, .glass.files, .set-card, .conn-card { margin-top: 10px; }
.glass.todo::before, .glass.upcoming::before, .glass.feed::before, .glass.files::before,
.set-card::before, .signin-card::before, .glass.f-card::before, .conn-card::before, .glass.folder::before {
  content: ""; position: absolute; top: -9px; right: 22px; width: min(38%, 220px); height: 10px; pointer-events: none;
  border-radius: 12px 12px 0 0; background: var(--card-flat);
  box-shadow: inset 1px 1px 0 var(--edge), inset -1px 0 0 var(--edge);  /* top and sides; its open bottom hides the card's edge */
}
/* class folders get theirs on the left, like a real folder */
.glass.folder { margin-top: 9px; }
.glass.folder::before { left: 16px; right: auto; width: 42%; }

/* ---------- Buttons: small rounded rectangles ---------- */
.btn {
  border-radius: 9px; padding: 9px 14px; font-weight: 500; color: var(--text);
  background: transparent; box-shadow: inset 0 0 0 1px var(--edge-strong);
}
.btn:hover { background: var(--sunk); }
.btn.small { border-radius: 7px; padding: 6px 11px; }
/* the main action: solid, no shadow */
.btn.dark, .btn.danger { color: var(--on-solid); background: var(--solid); box-shadow: none; }
.btn.dark:hover, .btn.danger:hover { opacity: 0.85; background: var(--solid); }
.btn.danger { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.btn.danger:hover { background: var(--solid); color: var(--on-solid); opacity: 1; }
/* icon buttons (week arrows, add): hairline circles */
.btn.icon { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--edge-strong); }
.btn.icon:hover { background: var(--sunk); }
.btn.dark.icon, .btn.dark.icon:hover { background: var(--solid); box-shadow: none; }

/* header connection pills and tags: tag-sized rectangles */
.pill { border-radius: 8px; padding: 7px 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--edge); }
button.pill:hover { background: var(--sunk); }
.tag, .todo-group span, .wl-tag { border-radius: 5px; background: transparent; box-shadow: inset 0 0 0 1px var(--edge-strong); }
.letter { border-radius: 6px; }
.chip-lime { border-radius: 5px; }

/* segmented controls: a hairline track with a solid selection, like the reference's toggle */
.segmented { background: transparent; box-shadow: inset 0 0 0 1px var(--edge); border-radius: 10px; }
.segmented button { border-radius: 7px; }
.segmented button.on { background: var(--solid); color: var(--on-solid); box-shadow: none; }
.theme-choice { background: transparent; box-shadow: inset 0 0 0 1px var(--edge); }
.theme-choice[aria-pressed="true"] { background: transparent; box-shadow: inset 0 0 0 1px var(--text); }

/* sidebar: the selected row is outlined, not lifted */
@media (min-width: 761px) {
  .sidebar { background: var(--bg); box-shadow: inset -1px 0 0 var(--edge); }
  .sidebar a[data-tab] { border-radius: 10px; }
  .sidebar a[data-tab].active { background: var(--card-flat); box-shadow: inset 0 0 0 1px var(--edge-strong); }
  .side-me { border-top-color: var(--edge); margin-top: 0; }
  .sidebar a[data-tab="settings"] { margin-top: auto; margin-bottom: 12px; }  /* Settings sits at the bottom, just above your account */
  .side-me-avatar { box-shadow: inset 0 0 0 1px var(--edge-strong); }
}
@media (max-width: 760px) {
  .sidebar { background: var(--card-flat); box-shadow: inset 0 0 0 1px var(--edge); }
}

/* ---------- Calendar items: in the style of the buttons ----------
   classes solid like the main action, athletics outlined on a quiet grey, meetings and due dates outlined,
   anything you added dashed. Outlined ones sit on the card color so the hour lines don't show through */
:root, html.dark {  /* html.dark too, to outrank theme-conflate.css's Dark kind colors */
  --class-bg: var(--solid);   --class-fg: var(--on-solid); --class-bd: transparent;
  --ath-bg: #e6e6e6;          --ath-fg: var(--text);       --ath-bd: var(--edge-strong);
  --meet-bg: var(--card-flat); --meet-fg: var(--text-2);   --meet-bd: var(--edge-strong);
  --due-bg: var(--card-flat); --due-fg: var(--text-2);     --due-bd: var(--edge);
  --mine-bg: var(--card-flat); --mine-fg: var(--text);     --mine-bd: var(--edge-strong);
  --allday-bg: #e6e6e6;       --allday-fg: var(--text);
}
html.dark { --ath-bg: #1a1a1a; --allday-bg: #1a1a1a; }
.event { border-radius: 9px; }
.event b { font-weight: 500; }
.due-chip { border-radius: 8px; }

/* ---------- Rows and inputs: hairlines instead of fills ---------- */
.task, .mail, .file, .module-row { background: transparent; box-shadow: inset 0 0 0 1px var(--edge); border-radius: 12px; }
.task:hover, .mail:hover, .file:hover, .module-row:hover { background: var(--sunk); }
/* To do rows: rounded rectangles like the other rows, with square-ish tags */
#todo .todo-item, #todo .todo-activity, .todo-item, .todo-activity { border-radius: 10px; }
.kind-tag { border-radius: 5px; }
/* the Activity / Task tags in To do look like the outlined buttons ("How it works") */
#todo .kind-tag { opacity: 1; color: var(--text); background: transparent; box-shadow: inset 0 0 0 1px var(--edge-strong);
  border-radius: 7px; padding: 4px 10px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; }
/* ...and all one look in To do: a plain fill with a light grey outline (the Calendar keeps its kinds apart) */
#todo .todo-activity, #todo .todo-item {
  --k-bg: var(--todo-fill); --k-fg: var(--text); --k-bd: var(--edge); --k-bs: solid;
}
/* the "needs more time" notes under To do: the same fill and light outline as the rows above them */
.plan-short { background: var(--todo-fill); box-shadow: inset 0 0 0 1px var(--edge); border-radius: 10px; }
.todo-new input, .set-input, .modal-input, .cal-command { background: transparent; box-shadow: inset 0 0 0 1px var(--edge-strong); border-radius: 10px; }
.conn-status { background: transparent; box-shadow: inset 0 0 0 1px var(--edge); border-radius: 6px; }
.blob, .avatar, .mail-avatar.blob-dot, .ficon, .me-avatar { box-shadow: inset 0 0 0 1px var(--edge-strong); }

/* ---------- Progress bars: a dotted track, like "Medium · · · · · · Atlas" ---------- */
.tip-bar, .cd-bar {
  background: radial-gradient(circle, var(--text-3) 0.8px, transparent 1.2px) 0 50% / 6px 100% repeat-x; opacity: 1;
}
.tip-bar i, .cd-bar i { background: var(--text); border-radius: 99px; }