/* The shell's stylesheet. Modules may use its custom properties, so services share a look without
   sharing a component library, which would tie them to one framework. */
:root {
  --fw-font: 15px/1.5 system-ui, sans-serif;
  --fw-text: #1d1d1f;
  --fw-muted: #6e6e73;
  --fw-surface: #fff;
  --fw-background: #f5f5f7;
  --fw-border: #d2d2d7;
  --fw-hover: rgba(0, 0, 0, .06);
  --fw-accent: #0a64d8;
  --fw-error: #c4161c;
}

body { margin: 0; font: var(--fw-font); color: var(--fw-text); background: var(--fw-background); }
#featurewise { max-width: 60rem; margin: 0 auto; padding: 3.5rem 1.5rem 2rem; }

/* Above a demo's pages: what it is, its story so far, and who the visitor can be. The page beneath it moves up. */
.fw-demo { max-width: 60rem; margin: 0 auto; padding: 3.5rem 1.5rem 0; }
.fw-demo[hidden] { display: none; }
.fw-demo:not([hidden]) + #featurewise { padding-top: 1rem; }
.fw-demo-title { font-size: 1.1rem; }
.fw-demo-chapter { color: var(--fw-muted); }
.fw-demo-about { margin: .25rem 0 .5rem; }
.fw-demo-fold { margin: .25rem 0; }
.fw-demo-fold summary { cursor: pointer; color: var(--fw-muted); }
.fw-demo-fold p, .fw-demo-fold ol { margin: .25rem 0 .5rem 1.1rem; }
.fw-demo-fold ol { padding-left: 1.1rem; }
.fw-demo-who { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; color: var(--fw-muted);
               padding-bottom: .75rem; border-bottom: 1px solid var(--fw-border); }
.fw-persona { font: inherit; color: #fff; background: var(--fw-accent); border: none; border-radius: 999px; padding: .2rem .8rem; cursor: pointer; }
.fw-persona:hover { filter: brightness(1.1); }
.fw-persona-name { font: inherit; color: var(--fw-accent); background: none; border: none; padding: 0; cursor: pointer;
                   text-decoration: underline dotted; text-underline-offset: .2em; }
.fw-persona-name:disabled { color: inherit; text-decoration: none; cursor: default; font-weight: 600; }
.fw-demo-reset { font: inherit; color: var(--fw-muted); background: none; border: 1px solid var(--fw-border); border-radius: 999px;
                 padding: .2rem .8rem; cursor: pointer; margin-left: auto; }
.fw-demo-reset:hover { background: var(--fw-hover); }

.fw-generic ul { list-style: none; margin: 0; padding-left: 1.25rem; border-left: 1px solid var(--fw-border); }
.fw-punct { color: var(--fw-muted); }
.fw-feature { font-size: 1.05rem; margin-bottom: .25rem; }
.fw-feature-service { color: var(--fw-muted); }
.fw-key { color: var(--fw-muted); }
.fw-null { color: var(--fw-muted); font-style: italic; }
/* A link's value: a small button on the line, after its property's name. */
.fw-link { font: inherit; font-size: .85em; line-height: 1.3; color: var(--fw-accent); background: none;
           border: 1px solid var(--fw-accent); border-radius: 4px; padding: 0 .45rem; cursor: pointer; vertical-align: baseline; }
.fw-link:hover { background: var(--fw-hover); }

.fw-link-dialog { border: none; border-radius: 8px; padding: 1rem 1.25rem; min-width: min(36rem, 90vw);
                  box-shadow: 0 4px 24px rgba(0, 0, 0, .3); }
.fw-link-dialog h2 { font-size: 1rem; margin: 0 0 .75rem; }
.fw-link-dialog textarea { width: 100%; box-sizing: border-box; font: 13px/1.4 ui-monospace, monospace; }
.fw-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .75rem; }
.fw-actions button, .fw-primary { font: inherit; padding: .25rem .9rem; border-radius: 4px; cursor: pointer;
                                  border: 1px solid var(--fw-border); background: var(--fw-surface); }
.fw-primary, .fw-actions .fw-primary { background: var(--fw-accent); border-color: var(--fw-accent); color: #fff; }
.fw-error { color: var(--fw-error); min-height: 1.5em; margin: .25rem 0 0; }

.fw-toasts { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex;
             flex-direction: column; gap: .5rem; z-index: 1001; }
.fw-toast { background: var(--fw-text); color: var(--fw-surface); padding: .5rem 1rem; border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }

.fw-services table { border-collapse: collapse; background: var(--fw-surface); }
.fw-services th, .fw-services td { text-align: left; padding: .4rem .9rem; border-bottom: 1px solid var(--fw-border); }
.fw-message { color: var(--fw-muted); }