/* MODULE: css/modules.css — the module stylesheet manifest (CONTRACT §2.1).
   Owned by the shell agent. Two jobs, nothing else:

     1. @import every css/mod-*.css that a module agent writes. Module agents
        create their own file and never touch this one, which is what keeps
        eight parallel agents from clobbering a shared stylesheet.
     2. Define the frame every module sits in — the card chrome, shared so no
        module has to redraw it and they cannot drift apart.

   Depends on css/tokens.css (loaded before this file by index.html).
   Loads nothing from the network: every import is a relative sibling path.

   @import must precede all other rules in a stylesheet, so the frame styles
   are below the block. A missing mod-*.css is ignored by the parser — the app
   still runs while its agent's file is in flight. */

@import "mod-day-ribbon.css";
@import "mod-presets.css";
@import "mod-task.css";
@import "mod-session-log.css";
@import "mod-estimate.css";
/* mod-now-next.css is gone: the scope amendment at the head of docs/CONTRACT.md
   cuts the now/next module (time tracking only, no task management). */
@import "mod-sequence.css";
@import "mod-methods.css";

/* ================================================================= *
 * THE MODULE FRAME
 *
 * Expected markup (module agents: build to this and you inherit the
 * whole card for free):
 *
 *   <section class="module" data-module="presets" aria-labelledby="m-presets-t">
 *     <header class="module__head">
 *       <h2 class="module__title" id="m-presets-t">Presets</h2>
 *       <div class="module__tools"><!-- buttons --></div>
 *     </header>
 *     <div class="module__body"><!-- yours --></div>
 *   </section>
 *
 * A module is a raised object resting on the ceramic body: hairline edge,
 * 1px top highlight and a shallow drop from --shadow-raise, light from
 * above. Drag handles, resize grips and the edit-mode lift belong to the
 * layout agent (css/layout.css) — not here.
 *
 * CONTRACT-GAP (§7 vs §10): src/layout.js wraps every registered module in
 * its own `.tt-mod` card, styled by css/layout.css. So inside the dashboard
 * grid the layout's frame is the frame, and `.module` is what a module wears
 * when it is mounted ANYWHERE ELSE — inside a mode panel, the settings panel,
 * a focus-mode surface. Never put `.module` on the root of something already
 * inside a `.tt-mod`: that draws the card twice.
 * ================================================================= */

.module {
  /* Local knob so a dense module can tighten its own padding without
     redeclaring the frame. */
  --module-pad: var(--space-4);

  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-inline-size: 0;
  block-size: 100%;
  padding: var(--module-pad);

  background-color: var(--surface);
  color: var(--ink);
  border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-raise);

  transition:
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

@media (min-width: 40rem) {
  .module { --module-pad: var(--space-5); }
}

/* Content that must respect the corner radius (bars, sparklines, ribbons)
   opts in; the default keeps overflow visible so a focus ring is never
   clipped by the card edge. */
.module--clip { overflow: hidden; }

/* Edge-to-edge body: the module paints its own inner padding. */
.module--flush { padding: 0; }

/* Recessed variant, for modules that read as a readout rather than a card. */
.module--sunk {
  background-color: var(--bg-sunk);
  border-color: transparent;
  box-shadow: var(--shadow-well);
}

/* ----------------------------------------------------------- title row */

.module__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: 1.5rem;
}

/* Optional hairline under the label row. */
.module__head--ruled {
  padding-block-end: var(--space-3);
  border-block-end: var(--hairline-w) solid var(--hairline);
}

/* Engraved label: small, capitalised, wide-tracked, quiet. It names the
   instrument; it never competes with the reading. */
.module__title {
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A single figure allowed to sit in the title row — "4h 12m", "3 today". */
.module__meta {
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-variant-numeric: var(--font-num-variant);
  font-feature-settings: var(--font-num-feat);
  font-size: var(--step--1);
  color: var(--ink-2);
  white-space: nowrap;
}

.module__tools {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
  margin-inline-start: auto;
  /* Pull the row back to the label's height: the buttons carry a 44px touch
     target, but the frame should not grow to 44px because of it. */
  margin-block: calc(var(--space-2) * -1);
}

/* ---------------------------------------------------------------- body */

.module__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-inline-size: 0;
}

.module__body--row {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.module__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--ink-3);
  font-size: var(--step--1);
}

/* Empty state. Kind, never scolding — the same tone the estimate module
   is required to take (CONTRACT §10). */
.module__empty {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  padding-block: var(--space-5);
  color: var(--ink-3);
  font-size: var(--step--1);
  text-align: center;
  text-wrap: balance;
}

/* The big reading inside a module: tabular, tight, never jittering. */
.module__value {
  font-family: var(--font-num);
  font-variant-numeric: var(--font-num-variant);
  font-feature-settings: var(--font-num-feat);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

.module__unit {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* -------------------------------------------------------------- states */

/* Hidden by the layout agent's per-module visibility switch (§7). Kept here
   because the frame owns its own disappearance. */
.module[data-hidden="true"] { display: none; }

.module[aria-busy="true"] { opacity: 0.6; }

@media (forced-colors: active) {
  .module {
    border: 1px solid ButtonBorder;
    box-shadow: none;
  }
}